/* Continuous Reel Slideshow
* Created: Aug 18th, 2010 by DynamicDrive.com. This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//jQuery.noConflict()

function ListSlideShow(options){
	var $=jQuery
	this.setting={displaymode:{type:'auto', pause:2000, cycles:2, pauseonmouseover:true}, orientation:'h', persist:true, slideduration:500} //default settings
	jQuery.extend(this.setting, options) //merge default settings with options
	var curslide=(this.setting.persist)? ListSlideShow.routines.getCookie("bannerSlider-"+this.setting.wrapperid) : 0
	this.curslide=(curslide==null || curslide>this.setting.imagearray.length-1)? 0 : parseInt(curslide) //make sure curslide index is within bounds
	this.curstep=0
	this.zIndex=1
	this.animation_isrunning=false //variable to indicate whether an image is currently being slided in
	this.posprop=(this.setting.orientation=="h")? "left" : "top"
	this.page = this.setting.page;
	options=null
	var slideshow=this, setting=this.setting, preloadimages=[], slidesHTML=''
	for (var i=0; i<setting.imagearray.length; i++){ //preload images
		//preloadimages[i]=new Image()
		//preloadimages[i].src=setting.imagearray[i][0]
		slidesHTML+=ListSlideShow.routines.getSlideHTML(setting.imagearray[i], setting.dimensions[0]+'px', setting.dimensions[1]+'px', this.posprop)+'\n'
	}
	jQuery(function($){ //on document.ready
		slideshow.init($, slidesHTML)
		
	})
	$(window).bind('unload', function(){ //on window onload
		if (slideshow.setting.persist) //remember last shown slide's index?
			ListSlideShow.routines.setCookie("bannerSlider-"+setting.wrapperid, slideshow.curslide)
	})
}

ListSlideShow.prototype={

	slide:function(nextslide, dir){ //possible values for dir: "left", "right", "top", or "down"
		if (this.curslide==nextslide)
			return
		var bannerSlider=this
		var nextslide_initialpos=this.setting.dimensions[(dir=="right"||dir=="left")? 0 : 1] * ((dir=="right"||dir=="down")? -1 : 1)
		var curslide_finalpos=-nextslide_initialpos
		var posprop=this.posprop
		if (this.animation_isrunning!=null)
			this.animation_isrunning=true //indicate animation is running
		this.$slides.eq(dir=="left"||dir=="top"? nextslide : this.curslide).css("zIndex", "auto") //increase zIndex of upcoming slide so it overlaps outgoing
		this.$slides.eq(nextslide).css(ListSlideShow.routines.createobj(['visibility', 'visible'], [posprop, nextslide_initialpos])) //show upcoming slide
			.animate(ListSlideShow.routines.createobj([posprop, 0]), this.setting.slideduration, function(){bannerSlider.animation_isrunning=false})
		this.$slides.eq(this.curslide).animate(ListSlideShow.routines.createobj([posprop, curslide_finalpos]), this.setting.slideduration, function(){jQuery(this).css("visibility", "hidden")}) //hide outgoing slide
		this.curslide=nextslide;
		if(this.setting.page!=''){
		    var links = $("#"+this.setting.page).find("div.banner_serial_middle").find("ul").find('li').find('a');
		    for(var i = 0;i < links.length; i++){
		        if(i == nextslide){
		            $(links[i]).addClass('selected');
		        }
		        else{
		            $(links[i]).removeClass('selected');
		        }
		    }
		}
		/*
		var dvleftAlter = this.$slides.eq(this.curslide).find('#dvLeftAlter');
		if(dvleftAlter){
		    var slideshow=this
		    setTimeout(function(){slideshow.change()}, 2800)
		    //setInterval(function(){slideshow.change()}, 2800);
		}*/
	},

	navigate:function(keyword){ //keyword: "back" or "forth"
		clearTimeout(this.rotatetimer)
		var dir=(keyword=="back")? (this.setting.orientation=="h"? "right" : "down") : (this.setting.orientation=="h"? "left" : "up")
		var targetslide=(keyword=="back")? this.curslide-1 : this.curslide+1
		targetslide=(targetslide<0)? this.$slides.length-1 : (targetslide>this.$slides.length-1)? 0 : targetslide //wrap around
		if (this.animation_isrunning==false)
			this.slide(targetslide, dir)
	},

	rotate:function(){
		var slideshow=this
		
		//setInterval(function(){slideshow.change()}, 2000);
		if (this.ismouseover){ //pause slideshow onmouseover
			this.rotatetimer=setTimeout(function(){slideshow.rotate()}, this.setting.displaymode.pause)
			return
		}
		var nextslide=(this.curslide<this.$slides.length-1)? this.curslide+1 : 0
		this.slide(nextslide, this.posprop) //go to next slide, either to the left or upwards depending on setting.orientation setting
		if (this.setting.displaymode.cycles==0 || this.curstep<this.maxsteps-1){
			this.rotatetimer=setTimeout(function(){slideshow.rotate()}, this.setting.displaymode.pause)
			if(this.curstep == Number.MAX_VALUE){
			    this.curstep = 0;
			}
			this.curstep++
		}
		
	},
    change:function(){
        //alert(this.curslide);
        var dvleft = this.$slides.eq(this.curslide).find('#dvLeft');
        var dvleftAlter = this.$slides.eq(this.curslide).find('#dvLeftAlter');
//        var dvValue=document.getElementById("dvLeftAlter").innerHTML;
        if($(dvleftAlter).is(":hidden")){
            
            $(dvleftAlter).show();
            $(dvleft).hide();    
            
//            if(dvValue!="%")
//            {
//            
//             $(dvleftAlter).show();
//              $(dvleft).hide();     
//                              
//            }
//            else
//            {
//            $(dvleftAlter).hide();
//                $(dvleft).show(); 
//                   
//            }
            
        }
        else{
           $(dvleftAlter).hide();
           $(dvleft).show();
           //$(dvAlter).hide('fast',function(){  
           //     $(dvOther).show('fast');
           //});         
        }
        var slideshow=this
		var dvleftAlter = this.$slides.eq(this.curslide).find('#dvLeftAlter');
		if(dvleftAlter){
		    var slideshow=this
		    setTimeout(function(){slideshow.change()}, 3500)
		    //setInterval(function(){slideshow.change()}, 2800);
		}
    },
    goTo:function(slideId){ //keyword: "back" or "forth"
		clearTimeout(this.rotatetimer);
		var slideshow=this;
		//var dir=(keyword=="back")? (this.setting.orientation=="h"? "right" : "down") : (this.setting.orientation=="h"? "left" : "up")
		var dir = "down";
		if(slideId > this.curslide){
		    dir = "up";
		}
		//var targetslide=(keyword=="back")? this.curslide-1 : this.curslide+1
		var targetslide = slideId;
		targetslide=(targetslide<0)? this.$slides.length-1 : (targetslide>this.$slides.length-1)? 0 : targetslide //wrap around
		if (this.animation_isrunning==false){
			this.slide(targetslide, dir);
			if (this.setting.displaymode.cycles==0 || this.curstep<this.maxsteps-1){
			    this.rotatetimer=setTimeout(function(){slideshow.rotate()}, this.setting.displaymode.pause);
			    if(this.curstep == Number.MAX_VALUE){
			        this.curstep = 0;
			    }
			    this.curstep++
		    }
		}
		
			
	},	
	createPages:function(){
	    var dv = $("#"+this.setting.page).find("div.banner_serial_middle").find("ul");
	    if(dv){
	        //var pg = "Total : " + this.$slides.length +" Page(s). ";
	        //$(dv).append(pg);
	        for(var i = 0; i<this.$slides.length; i++){
	            var linkClass = '';
	            if(i == 0){
	                linkClass='selected';
	            }
	            var a = "<li><a href='javascript:bannerSlider.goTo(" + i + ")' class='"+linkClass+"' title='Go to "+(i+1)+"'>" + (i+1) + "</a></li>";
	            $(dv).append(a);
	        }
	        //var a = "<a href='javascript:imgSlider.rotate()'>Rotate</a>";
	        //$(dv).append(a);
	    }
	    /*
	    var dv = $("#"+this.setting.wrapperid);
	    if(dv){
	        var pg = "<div class='banner_dowm' id='bannerDown'><div class='banner_down_right'>";
	            pg += "<div class='banner_down_right_1'></div>";
	            pg += "<div class='banner_down_right_2'>";
	            pg += "<ul>";	        
	            for(var i = 0; i<this.$slides.length; i++){
	                var a = "<li><a href='javascript:bannerSlider.goTo(" + i + ")'>" + (i+1) + "</a></li>";
	                pg += a;
	                //$(dv).append(a);
	            }
	            pg += "</ul>";
	            pg += "</div>";
	            pg += "<div class='banner_down_right_3'></div>";
	            pg += "</div></div>";
	       
	        //var a = "<a href='javascript:imgbannerSlider.rotate()'>Rotate</a>";
	        $(dv).append(pg);
	    }*/
	
	},
	init:function($, slidesHTML){
		var slideshow=this, setting=this.setting
		this.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}) //main DIV
		if (this.$wrapperdiv.length==0){ //if no wrapper DIV found
			alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
			return
		}
		this.$wrapperdiv.html(slidesHTML)
		this.$slides=this.$wrapperdiv.find('div.slide')
		this.$slides.eq(this.curslide).css(ListSlideShow.routines.createobj([this.posprop, 0])) //set current slide's CSS position (either "left" or "top") to 0
		if (this.setting.displaymode.type=="auto"){ //auto slide mode?
			this.setting.displaymode.pause+=this.setting.slideduration
			this.maxsteps=this.setting.displaymode.cycles * this.$slides.length
			if (this.setting.displaymode.pauseonmouseover){
				this.$wrapperdiv.mouseenter(function(){slideshow.ismouseover=true})
				this.$wrapperdiv.mouseleave(function(){slideshow.ismouseover=false})
			}
			this.rotatetimer=setTimeout(function(){slideshow.rotate()}, this.setting.displaymode.pause)
			var dvleftAlter = this.$slides.eq(this.curslide).find('#dvLeftAlter');
		    if(dvleftAlter){		   
		        setTimeout(function(){slideshow.change()}, 3500)
		        //setInterval(function(){slideshow.change()}, 2800);
		    }
		}
	    if(this.setting.page != ""){
	        this.createPages();
	    }
		//setInterval(function(){slideshow.change()}, 2000);
	}

}

ListSlideShow.routines={

	getSlideHTML:function(imgref, w, h, posprop){
		var posstr=posprop+":"+((posprop=="left")? w : h)
		var layerHTML=(imgref[1])? '<a href="'+imgref[1]+'" target="'+imgref[2]+'">' : '' //hyperlink slide?
		//layerHTML+='<img src="'+imgref[0]+'" style="border-width:0;" />'
		layerHTML+=imgref[0];
		//return layerHTML;
		layerHTML+=(imgref[1])? '</a>' : ''
		return '<div class="slide" style="position:absolute;'+posstr+';">'
			+'<div>'
			+layerHTML
			+'</div></div>' //return HTML for this layer
	},


	getCookie:function(Name){ 
		var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
		if (document.cookie.match(re)) //if cookie found
			return document.cookie.match(re)[0].split("=")[1] //return its value
		return null
	},

	setCookie:function(name, value){
		document.cookie = name+"=" + value + ";path=/"
	},

	createobj:function(){
		var obj={}
		for (var i=0; i<arguments.length; i++){
			obj[arguments[i][0]]=arguments[i][1]
		}
		return obj
	}
}