/*  
    Jquery UI slideshow widget
    ----------------------------------------------------
    Updated:    Wen, Sep, 08 2010
    Author:     Rafael Rocha Fernandes
    Contact:    dengunsmoke@gmail.com
    ----------------------------------------------------
    Requires:   Jquery >= 1.4.2, Jquery UI >= 1.8.2
    ----------------------------------------------------
    $.slideshow({
        images: new Array(),        # [{ src:'path/to/image', title: 'title' }]
        navigation: false,          # set to true to create a navigation bar for the images
        navigationOpacity: 0.8,     # set the opacity of the navigation
        delay: 8000,                # set the delay between images
        speed: 1000,                # set the speed of the animation,
        paused: false,              # set to true to pause the rotation of images
        animation: "fade"           # you can change the animation type. Ex: crossfade, fade
    });
    ----------------------------------------------------
    List of CSS classes
    .ss-image-container
    .ss-animation-container
    .ss-navigation
    .ss-title
    .ss-button-animation
    .ss-button-animation.play
    .ss-button-animation.pause
    .ss-button-container
    .ss-button
    .ss-button.active
    
    NOTE: USE !important to overwrite some styles
*/
(function($) {
	$.widget("ui.slideshow", {
		options: {
		    images: new Array(),
		    navigation: false,
		    navigationOpacity: 0.8,
		    delay: 8000,
		    speed: 1000,
		    paused: false,
		    width: null,
		    height: null,
		    animation: "fade",
		    onChange: function(i){}
		},
		_create: function() {
		    var self = this;
		    var element = this.element;
		    element.css("position","relative");
		    self.paused=self.options.paused;
		    if(self.options.images.length>0)
		    {
		        var _imageContainer = $("<div>").addClass("ss-image-container").hide();
                var _animationContainer = $("<div>").addClass("ss-animation-container");
                _animationContainer.css("position","relative");
		        element.append(_imageContainer);
		        element.append(_animationContainer);
		        // FADE
		        if(self.options.width!=null && self.options.height!=null)
		        {
		            var mi = $("<div>").width(self.options.width).height(self.options.height);
        		    var bi = $("<div>").width(self.options.width).height(self.options.height);
		        } else {
		            var mi = $("<img>");
        		    var bi = $("<img>");
	            }
		        mi.addClass("ss-mi")
		        .css({position:"absolute",top:0,left:0})
		        .css("z-index",500)
		        .animate({opacity:0},0);
		        
    		    bi.addClass("ss-bi")
    		    .css({position:"absolute",top:0,left:0})
    		    .css("z-index",400);
    		    if(self.options.animation == "fade")
    		    {
	                _animationContainer.append(mi);
    		    }
    		    // CROSS FADE
    		    if(self.options.animation == "crossfade")
    		    {
                    _animationContainer.append(bi);
	                _animationContainer.append(mi);
    		    }
    		    self.t = $("<div>").hide();
    		    element.append(self.t);
		        self.ic = _imageContainer;
		        self.ac = _animationContainer;
		        self.mi = mi;
		        self.bi = bi;
		        
		        if(self.options.navigation==true)
		            self._navigationCreate();
		        
		        self.currentImage = 0;
		        self._loadImage(self.currentImage);
		    }
		    
		},
		_navigationCreate: function() {
		    var self = this;
		    var nav = $("<div>");
		    nav.css({
		        position:"absolute",
		        bottom:0,
		        left:0,
		        width:"100%",
		        opacity:self.options.navigationOpacity
		    }).css("z-index",600).addClass("ss-navigation");
		    self.element.append(nav);
		    
		    var title = $("<span>")
		    .addClass("ss-title")
		    .css({float:"left",marginLeft:5,padding:"5px",color:"#FFF"});
		    nav.append(title);
		    self.navTitle = title;
		    var ul = $("<ul>").css({float:"right",listStyle:"none",margin:0,padding:0});
		    ul.addClass("ss-button-container");
		    nav.append(ul);
		    var playpause = $("<li>").addClass("ss-button-animation")
		    .css({float:"left",listStyle:"none",marginRight:5,padding:"5px",cursor:"pointer",color:"#FFF"});
		    
		    if(self.options.images.length>1)
		    {
    		    
    		    
    		    if(self.options.paused)
    		    {
    		        playpause.text("play").addClass("play");
    		        self.paused=true;
    		    } else {
    		        playpause.text("pause").addClass("pause");
    		        self.paused=false;
    		    }
    		    playpause.click(function(){
    		       if(!self.paused)
    		       {
    		           playpause.text("play").addClass("play").removeClass("pause");
    		           self.paused=true;
    		       } else {
    		           playpause.text("pause").addClass("pause").removeClass("play");
    		           self.paused=false;
    		       }
    		    });
    		    self.playpause = playpause;
    		    ul.append(playpause);
    		    for(i in self.options.images)
    		    {
    		        var cu = parseInt(i)+1;
    		        var li = $("<li>").text(cu)
    		        .attr("rel",i)
    		        .addClass("ss-button")
	        .css({float:"left",listStyle:"none",marginRight:5,padding:"5px",cursor:"pointer",color:"#FFF"});
    		        ul.append(li);
    		        li.click(function(){
    		            if(self.ready)
            		    {
            		        if(self.paused==false)
            		        {
            		            playpause.text("play").addClass("play").removeClass("pause");
                		        self.paused=true;
                		    }
    		                self._loadImage($(this).attr("rel"));
		                }
    		        });
    		    }
    		    self.navigation = nav;
    		}
		},
		_loadImage: function(i) {
		    var self = this;
		    self.ready = false;
		    var currentImage = i;
		    if(currentImage in self.options.images)
		    {
		        var image = self.options.images[currentImage];
		        if(image.src!=undefined)
    		    {
                    self.currentImage = i;
        	        //check cache
        		    var cached = false;
        		    $(".ss-image-cached").each(function(){
                        if($(this).attr("src")==image.src)
                            cached = true;
                    });
                    if(!cached)
                    {
                       var img = $("<img>").addClass("ss-image-cached");
                       img.hide();
                       img.load(function(){
                           self.ic.append($(this));
                           self._animate(currentImage);
                       })
                       .error(function(){})
                       .attr("src",image.src);
                    } else {
                    	self._animate(currentImage);
                    }
        		}
        	}
		},
		_animate: function(i) {
		    var self = this;
		    if(self.options.navigation==true)
		    {
		        if(self.options.images.length>1)
    		    {
    		        self.navigation.find("li").each(function(){
    		            $(this).removeClass("active");
    		            if($(this).attr("rel")==i)
    		                $(this).addClass("active");
    		        });
    		    }
    		    if(self.options.images[i].title!=undefined)
    		        self.navTitle.text(self.options.images[i].title);
    		        
    		    self.options.onChange(self.options.images[i]);
		    }
		    
		    if(self.options.animation == "fade")
            {
                self._animateFade(i);
            }
            if(self.options.animation == "crossfade")
            {
                self._animateCrossFade(i);
            }
		},
		_animateFade: function(i) {
		    var self = this;
		    var currentImage = i;
	        var image = self.options.images[currentImage];
	        
            self.mi.stop().animate({opacity:0},self.options.speed,"linear",function(){
                if(self.options.width!=null && self.options.height!=null)
		        {
		            self.mi.css("background-image","url('"+image.src+"')");
		        } else {
		             self.mi.attr("src",image.src);
		        }
               
                self.mi.animate({opacity:1},self.options.speed,"linear",function(){
                    self.ready = true;
                    self.t.stop().animate({width:0},self.options.delay,"linear",function(){
                        self._nextImage();
                    });
                });
            });
		},
		_animateCrossFade: function(i)
		{
		    var self = this;
		    var currentImage = i;
	        var image = self.options.images[currentImage];
	        
	        if(self.options.width!=null && self.options.height!=null)
	        {
	            self.bi.css("background-image","url('"+image.src+"')");
	        } else {
	             self.bi.attr("src",image.src);
	        }
	        self.mi.stop().animate({opacity:0},Math.round(self.options.speed*1.9),"linear",function(){
                if(self.options.width!=null && self.options.height!=null)
		        {
		            self.mi.css("background-image","url('"+image.src+"')");
		        } else {
		             self.mi.attr("src",image.src);
		        }
                self.mi.animate({opacity:1},0,"linear",function(){
                    self.ready = true;
                    self.t.stop().animate({width:0},self.options.delay,"linear",function(){
                        self._nextImage();
                    });
                });
            });
	    
		},
		_nextImage: function() {
		    var self = this;
		    if(!self.paused)
		    {
		        self.nextImage();
		    } else {
		        self.t.animate({width:1},self.options.delay,"linear",function(){
                    self._nextImage();
                });
		    }
		},
		_prevImage: function() {
		    var self = this;
		    if(!self.paused)
		    {
		        self.prevImage();
		    } else {
		        self.t.animate({width:1},self.options.delay,"linear",function(){
                    self._prevImage();
                });
		    }
		},
		nextImage: function() {
		    var self = this;
		    if(self.ready)
		    {
		        var c = parseInt(self.currentImage)+1;
		        if(c>=self.options.images.length)
    		        c=0;
    		    self._loadImage(c);
    		}
		},
		prevImage: function() {
		    var self = this;
		    if(self.ready)
		    {
		        var c = parseInt(self.currentImage)-1;
    		    if(c<0)
    		        c=self.options.images.length-1;
    		    self._loadImage(c);
    		}
		},
		play: function(){
		    var self = this;
	        playpause.text("pause").addClass("pause").removeClass("play");
	        self.paused=false;
		},
		pause: function(){
		    var self = this;
		    playpause.text("play").addClass("play").removeClass("pause");
	        self.paused=true;
		}
		
	});
})(jQuery);