/*
opts:
    navigator: 
    thumbs:
    duration:
    speeed:

*/
jQuery.fn.imageSlide = function(opts) {

	var slider = function(el,opts) {

        var opts = $.extend({ 
            slideIndex: true,
            navigator: true,
            thumbs: true,
            speed:  1000
        },opts);

        this.el = el;


		var w = el;
		var height = this.height = 0;
		var width = this.width = 0;
		el.css({ 
			position: 'relative',
			zIndex: 0,
			background: '#000'
		});
		
		var cur   = this.cur = 0;
		var index = this.index = 0;
		var images = this.images = [ ];
        var subtitles = this.subtitles = [ ];

		w.find('img').each(function(i,e) {
			var el = $(this);
			height = el.attr('height') > height ? el.attr('height') : height;
			width = el.attr('width') > width ? el.attr('width') : width;

            var subtitle = el.attr('title');

			el.addClass( 'index-' + (index++) );
			images.push( el );
            subtitles.push( subtitle );

			el.css({ 
				position: 'absolute' 
			}).hide();
		});

        var max_height = 300;
        var over_max_height;
        if( height > max_height ) {
            height = max_height;
            over_max_height = true;
        }
        height+= 40;

		$(images).each(function(i,e) {
            var eh = e.height();
            var ew = e.width();

            if( over_max_height ) {
                var r = eh / max_height;
                ew = ew / r;
                eh = max_height;
            }

			var d = height - eh;
			var topoffset = d / 2;
            var leftoffset = (width - ew) / 2;
			e.css({ 
                top: topoffset,
                left: leftoffset,
                width: ew, 
                height: eh });
		});

		el.height( height );
		el.width( width );


		var that = this;


		this.slideIndex = $('<div/>')
			.addClass('slide-index')
			.html( cur + 1 )
			.css({ opacity: 0.3 });

        if( opts.slideIndex )
            w.append( this.slideIndex );

        /* thumbs */
        if( opts.thumbs ) {
            var thumbwrapper = $('<div/>').addClass('thumb-navs');
            thumbwrapper.width( width );

            $(images).each(function(i,e) {
                var img = $('<img/>');
                img.attr({ 
                    src: e.attr('src') , 
                    align: 'left',
                    width: 50,
                    maxHeight: 50
                });
                img.width(50);
                img.height(50);
                img.addClass('thumb-nav');
                img.click( function() {
                    that.gotoSlide(i);
                });
                thumbwrapper.append( img );
            });
            thumbwrapper.append( $('<div/>').css({ clear: 'both' }) );
            w.after( thumbwrapper );
        }


        if( opts.navigator ) {
            if( this.images.length > 1 ) {
                var nextbtn = $('<a/>')
                    .addClass('slide-link slide-next')
                    .attr({  }).html('下一張').click(function() {
                    that.nextSlide();
                });
                var prevbtn = $('<a/>')
                    .addClass('slide-link slide-prev')
                    .attr({  }).html('上一張').click(function() {
                    that.prevSlide();
                });
                var nav = $('<div/>').addClass('slide-navi');
                nav.append( nextbtn ).append( prevbtn ).append( '<div class="clear"> </div>' );
                nav.width( width );
                w.after( nav );
            }
        }

        var subtitleEl = $('<div/>').addClass('story-image-subtitle');
        this.subtitleEl = subtitleEl;

        w.after( subtitleEl );

        if( opts.duration ) {
            setInterval( function() {
                that.cycle();
            }, opts.duration );
        }

        this.opts = opts;

        this.el.after( $('<div/>').css({ clear: 'both' }));

		// show first image
		images[ cur ].fadeIn();

        this.updateSubtitle();
	};

	slider.prototype = {
        cycle: function(effect) {
			// this.images[ this.cur ].hide();
            var prevcur = this.cur;

            if( this.cur + 1 == this.images.length )
                this.cur = 0;
            else
                this.cur++;

			// this.images[ this.cur ].slideDown();
			this.images[ this.cur ].show( 'slide', { direction: 'left' }, this.opts.speed );
			this.images[ prevcur ].hide(  'slide', { direction: 'right' }, this.opts.speed );

			this.updateIndex();
        },

        updateSubtitle: function() {
            var subtitle = this.subtitles[ this.cur ];
            this.subtitleEl.html( subtitle );
        },

		updateIndex: function() {
			this.slideIndex.html( this.cur + 1 );
            this.updateSubtitle();
		},

		gotoSlide: function(i) { 
			if( i >= this.images.length || i < 0 )
				return;

			this.images[ this.cur ].hide();
			this.images[ this.cur = i ].fadeIn();
			this.updateIndex();
		},

		nextSlide: function() { 
			if( this.cur + 1 >= this.images.length )
				return;

			this.images[ this.cur ].hide();
			this.images[ ++this.cur ].fadeIn();
			this.updateIndex();
        },

		prevSlide: function() { 
			if( this.cur - 1 < 0 )
				return;

			this.images[ this.cur ].hide();
			this.images[ --this.cur ].show();
			this.updateIndex();
        }
	};

	return new slider( this , opts );
};