/**
 * a slideshow system. will display a single slide (with a description, title and image) at a time,
 * and will fade between the slides based on a duration. you can manually jump to specific slides.
 * @class       slideshow
 * @example

<link rel="stylesheet" type="text/css" href="css/slideshow.css">
<script type="text/javascript" src="js/slideshows.js"></script>

	<div id="slideshow2">
		<div class="container">
			<div class="slide" caption="" url="" desc="" style="display:;"><a href="#"><img src="images/v1.jpg"></a></div>
			<div class="slide" caption="" url="" desc="" style="display:none;"><a href="#"><img src="images/v2.jpg"></a></div>
		</div>
	</div>


	$('#slideshow2').slideshows(
	{
		showcaption: false,//true
		showpreview: false,//true
		showpaging:false//true
	}
	);
 

 */
(function($) {
$.fn.slideshows = function(options){
    /* the slide containing element.*/
    var object=null;
    /* the rotation timer.*/
    var timer=null;
    /* current index.*/
    var index=0;
    /* a collection of the slide dom objects.*/
    var slides=[];
    /* is rotation currently playing.*/
    var playing=false;
	/* the last slide index.*/
	var lastslide=null;
    /* initialize the slider by building the slides based on this.data and starting the rotation.
     * @param object - css expression
     * @constructor
     */
	if (!this.length) {
		return;
	}
	options = $.extend({
		showcaption: true,
		showpreview: true,
		showpaging: true
	}, options || {});
	
	object = this;
	slides = object.find('.slide');
	
	if(options.showpaging==true){
		object.append('<div class="paging"></div>');
		object.children().eq(1).html("");
		var de;
		for(i=0;i<slides.length;i++){
			if(i==0){
				de="current";
			}else{
				de="";
			}
			//add image
			object.children().eq(1).append('<a href="javascript:;" class="'+ de +'">'+ eval(i+1) +'</a>');
		}
		object.find('.paging a').mouseleave(function() {
			object.find('.preview').empty().hide();
		});
	
		object.find('.paging a').each(function(i) {
			$(this).click(function() {
				jump(i, $(this));
			})
			$(this).mouseover(function() {
				preview(i);
			})
		});
	}
	if(options.showpreview==true){
		object.append('<div class="preview"></div>');
	}
	if(options.showcaption==true){
		object.append('<div class="caption"></div>');
	}
	// apply events
	object.find('.mask').hover(
		function() { pause(); },
		function() { play(); }
	);

	if (slides.length <= 1){
		object.find('.paging').hide();
	}
//		link(0);
	play();

	/**
	 * fade out the slides and fade in selected.
	 * @param index
	 */
	function fade(index) {
		slides.stop(true, true).fadeout('normal');
		slides.eq(index).fadein(1500);
//		link(index);

		if(options.showcaption==true){
			var caption = object.find('.caption');
			caption.stop(true, true).fadeout('fast', function() {
				if ($(slides[index]).attr("caption")) {
					caption.html("")
						.append('<h3><a href="'+ $(slides[index]).attr("url") +'" class="link">'+ $(slides[index]).attr("caption") +'</a></h3>')
						.append($(slides[index]).attr("desc"))
						.fadein(1500);
				}
			});
		}

		lastslide = index;
	}

    /**
     * manually jump to a specific slide. pauses rotation.
     * @param index
	 * @param control
     */
    function jump(index, control) {
		if ((lastslide == index) || (slides.length <= 1))
			return;

//        pause();
		fade(index);
        index = index;

		object.find('.paging a').removeclass('current');
		$(control).addclass('current');
    }
    /**
     * play the rotation.
     */
    function play() {
		if (slides.length <= 1)
			return;

       if (!playing) {
            playing = true;
            timer = window.setinterval(rotate, 4000);
       }
    }
    /**
     * pause the automatic rotation.
     */
    function pause() {
		if (slides.length <= 1)
			return;

        window.clearinterval(timer);

        playing = false;
    }
    /**
     * display a tooltip preview.
	 * @param index
     */
    function preview(index) {
            var tooltip = object.find('.preview'),
				top = (index * 15) + 15;

			if ($(slides[index]).find('img').attr("src")) {
				$('<img/>', {
					src: $(slides[index]).find('img').attr("src"),
					width: 100,
					height: 47,
					alt: ''
				}).appendto(tooltip);
			}

            tooltip.append('<span>'+ $(slides[index]).attr("caption") +'</span>').css('top', top);
            tooltip.show();
    }
    /**
     * automatically cycle through all the slides.
     */
    function rotate() {
        var slideindex = index + 1;

        if (slideindex > (slides.length - 1))
            slideindex = 0;

		if (lastslide == slideindex)
			return;

        fade(slideindex);
        index = slideindex;

        // set control to current
		if(options.showpaging==true){
			object
				.find('.paging a').removeclass('current').end()
				.find('.paging a:eq('+ slideindex +')').addclass('current');
		}
    }
    /**
     * toggle between play and pause.
     */
    function toggle() {
        if (playing)
            pause();
        else
            play();
    }
};
})(jquery);