// JavaScript Document


sandecom.SlideShow = Class.create();

sandecom.SlideShow.prototype = {

	initialize: function(elem,options){
		
		
		this.SlideShow = $(elem);
		
		this.slides = Element.childElements(this.SlideShow);
		
		this.slideList = new sandecom.Collection.CircleList();
		
		this.setMenuSlide();
		this.checkElements(Element.childElements(this.SlideShow));
			
		this.zIndex       = 5000;
		this.cont         = 0;
		this.MarginBorder = 0;
		this.play         = true;
		this.setUpSlide   = true;
		this.process      = new Array();
		this.index        = new Array();
		this.pause        = "";
		
		this.indexAct   = new Object();
		this.indexInact = new Object();
		
		this.options = new Object();
		this.setOptions(options);	
		this.setSlidesFeatures();
		
		
		this.createControler();
		
		if(window.slideShowId==null){
			window.slideShowId=1;			
		}else{
			window.slideShowId++;						
		}
		
		this.id = window.slideShowId;
		
		
		this.slideList.current = this.slideList.ini
		this.show();
		
		
		
	
	},
	
	setOptions: function(options) {
		
		this.options = {
						
						timeTransition  : 4,
						fade            : 1,
						activeControl   : false,

						heightTitle     : 20,
						alphaTitle      : 80,
						bgTitle         : "#FFF",
						padTitle        : 5,

						mouseOutBorder  : "none",
						mouseOverBorder : "none",
						
						alignPausePlay  : "right",
						
						borderPause     : "1px solid #666",
						bgPause         : "#EEE",
						colorPause      : "#666",
						
						borderPlay      : "1px solid #666",
						bgPlay          : "#090",
						colorPlay       : "#FFF",
						
						borderIndexAct  : "1px solid #666",
						bgIndexAct      : "#FFF",
						colorIndexAct   : "#666",

						borderIndexInact: "1px solid #666",
						bgIndexInact    : "#AAA",
						colorIndexInact : "#333"					
    					}

	    Object.extend(this.options, options);
	},

/*************************************
AJUSTA CONSISTENCIA DO SLIDE
*************************************/

	setMenuSlide :function(){
		
		//debugger;
		var menu = $('menuSlideShow');
		
		if(menu!=null){
			
			menu.setStyle({
				position :"absolute",
				zIndex   : 10000
		    });
			
		}
		
	},

	checkElements :function(elem){
		
		for(var i=0; i< elem.length;i++){
			
			if(elem[i].id!="menuSlideShow"){
				var slideItem = new Object();			
					slideItem.img   = this.extractBasicElements(elem[i],"IMG");
					slideItem.p     = this.extractBasicElements(elem[i],"P");
					slideItem.a     = this.extractBasicElements(elem[i],"A");
					slideItem.alpha = 0;
			
				if(slideItem.img!=null){
					slideItem.div = elem[i];
					this.slideList.add(slideItem);			
				}else{
					elem[i].remove();
				}
			}
						   
		}	
	
	},
	
	extractBasicElements:function(slide,type){
		// ;		
		var suns = Element.childElements(slide);
		var aff = "";
		
		for(var i=0; i< suns.length ;i++){	
		
			if(suns[i].nodeName==type){
				return suns[i];
			}else{			
				aff = Element.childElements(suns[i]);	
				if(aff.size()>0){
					return this.extractBasicElements(suns[i],type);
				}
				
			}				
		}
		
		return null;
	},
	
	setSlidesFeatures : function(){
		
		for(var i =0; i<this.slideList.len;i++){
			this.slideList.next();
			this.slideConfig(this.slideList.current.register);
		}
		
	},
	
	slideConfig :function(slide){

		this.configDivs(slide);
		this.configP(slide);
	},
	
	configDivs :function(slide){
		
		// SETANDO EVENTOS AO SLIDE
		this.setSlideEvents(slide);
	
		// SETANDO ESTILOS AO SLIDE
		slide.div.setStyle({
			background      : 'url("' + slide.img.src + '") no-repeat',
			zIndex          : this.zIndex,
			display         : "block",
			opacity         : 0,           
			position        : "absolute",
			overflow        : "hidden",
			filter          : "alpha(opacity=0)",
			cursor          : "pointer",
			border          : this.options.mouseOutBorder
		});
		
		slide.img.remove();

		var margin = -parseInt(((Element.getStyle(slide.div,"borderLeftWidth").split("px")[0])*2));
		
		if(margin>=0){
			this.MarginBorder = margin;
		}
		
		
		if(this.options.activeControl){
			var slideHeight = Element.getHeight(this.SlideShow) - 21 + this.MarginBorder + "px";	
			var mTop        = "21px";
		}else{
			var slideHeight = Element.getHeight(this.SlideShow) + this.MarginBorder + "px";
			var mTop = 0;
		}
		
		
		slide.div.setStyle({
			width           : Element.getWidth(this.SlideShow) + this.MarginBorder + "px",
			height          : slideHeight,
			marginTop       : mTop
		});
		
	},
	
	configP :function(slide){
		
		if(slide.p!=null){
			
			var hgt = Element.getHeight(slide.div)*(this.options.heightTitle/100);

			slide.p.setStyle({
				backgroundColor : this.options.bgTitle,
				marginTop       : (Element.getHeight(slide.div)-hgt-(this.options.padTitle*2)) + "px",
				height          : hgt  + "px",
				opacity         : (this.options.alphaTitle/100),              	
			    filter          : "alpha(opacity="+ this.options.alphaTitle+")",
				padding         : this.options.padTitle + "px"
			});
		}		
	},
	
/********************************
EVENTOS
********************************/

	setSlideEvents : function(slide){
		if(slide.a!=null){
			slide.div.onclick = this.goto.bind(this,slide.a);
		}
		
		slide.div.onmouseover =  this.mouseOver.bind(this, slide.div);
		slide.div.onmouseout  =  this.mouseOut.bind(this, slide.div);
		
	},
		
	mouseOver :function(slide){
		// ;
		slide.setStyle({
			border: this.options.mouseOverBorder
		});
		
	},
	
	mouseOut :function(slide){
		// ;
		slide.setStyle({
			border: this.options.mouseOutBorder
		});
		
	},
	
	pauseOrPlay:function(){
		
		this.clearBufferOut();
		
		if(this.play){
			this.play = false;	
			
			// SETANDO ESTILOS
			estilo = this.pause.style;			
			estilo.border     = this.options.borderPlay;
			estilo.color      = this.options.colorPlay;
			estilo.background = this.options.bgPlay;		

			this.pause.innerHTML =  "&raquo;";
		}else{
			this.play = true;		
			
			// SETANDO ESTILO
			estilo = this.pause.style;
			estilo.border     = this.options.borderPause; 
			estilo.color      = this.options.colorPause;
			estilo.background = this.options.bgPause;			
					
			this.pause.innerHTML = "ll";
			this.show();
		}
	},
	
	showSlideIndex :function(slide){
		this.clearBufferOut();
		this.setAlpha(this.slideList.current.register,0);
		this.slideList.current = slide;
		this.cont=0;
		this.setAlpha(slide.register,100);
		this.setUpSlide = true;
		this.play = false;
		this.pauseOrPlay();
	},
	
	setColorIndex:function(index){
		//
		this.indexAct = this.slideList.current

				estilo = this.indexAct.register.index.style
		
				estilo.color      = this.options.colorIndexAct;
				estilo.background = this.options.bgIndexAct;

	},	
	
	unSetColorIndex : function(){	
		
		//
		if(this.indexAct.register!=null){
			
			estilo = this.indexAct.register.index.style;

					estilo.border     = this.options.borderIndexInact;
					estilo.color      = this.options.colorIndexAct;
					estilo.background = this.options.bgIndexInact

		}
	},
	
	clearBufferOut : function(){

		// ;
		var obj = this.process;	
		if(obj){
			for(var i=0; i<obj.length;i++){
				var j = obj[i];
				clearTimeout(obj[i]);
			}		
		}	
		this.process = new Array();	
	},
	
	
/********************************
CONFIGURAÇÃO DE ANIMAÇÃO
********************************/

	show :function(){
	
		if(this.play){
								
			this.transition();
				
		}
	},
	
	// CHAMADO POR SHOW PARA APRESENTAR O SLIDE
	transition:function(){
		
		
		if(this.setUpSlide){
			this.UpSlide();	
			this.setUpSlide = false;

			// MUDA 
			if(this.options.activeControl){
				
				this.unSetColorIndex();
				this.setColorIndex();	
				
			}
		}
		
		// ;
		if(this.cont<100 && this.slideList.current.register.alpha<100){		
			// verifica a necessidade e trazer o slide para cima
			
			this.cont = this.cont + this.options.fade;
			// apresenta o slide
			this.setAlpha(this.slideList.current.register,this.cont);
			this.process[this.process.length] = setTimeout(this.transition.bind(this),0);	
		}else{
			this.nextSlide();
		}
	},
	
	// MUDA DE SLIDE
	nextSlide :function(){
		// ;
		this.setUpSlide = true;
		this.cont=0;	
		this.slideList.next();	
		this.slideList.current.register.alpha=0;
		this.process[this.process.length] = setTimeout(this.show.bind(this),parseInt(this.options.timeTransition)*1000);	
	},
	
	UpSlide :function(){
		// ;
		this.zIndex++;
		this.slideList.current.register.div.style.zIndex = this.zIndex;
		var i =0
		
	},

	setAlpha:function(slide,value){
		
		slide.div.setStyle({	
			opacity   : value/100,              	
		    filter    : 'alpha(opacity=' + value + ')'
		});
		
		slide.alpha = value;
	},
	
/*********************************
CONFIGURAÇÃO DO CONTROLADOR DO SLIDE
**********************************/

	createControler :function(){	
		
		if(this.options.activeControl){
			var ctrl = this.createDiv("slideShowControl");
			this.SlideShow.appendChild(ctrl);
						
				// setando estilos
				
				estilo = ctrl.style;
							
				estilo.marginLeft  = (this.MarginBorder*(-1)/2) + "px";
				estilo.marginRight = (this.MarginBorder*(-1)/2) + "px"; 
				estilo.marginTop   = "5px";
				estilo.height      = "15px";	


			
			this.createPauseAndPlay(ctrl);
		}
	},
	
	createPauseAndPlay :function(ctrl){
		
		
		this.pause = this.createDiv("pauseAndPlay");		
		
		ctrl.appendChild(this.pause);
			
		this.pause.innerHTML = "ll";
			

				// SETANDO ESTILOS
				
				estilo = this.pause.style;
				
				
				this.setFloatStyle(this.pause,this.options.alignPausePlay);			
					
				estilo.width       = "12px";
				estilo.height      = "13px";
				estilo.overflow    = "hidden";
				estilo.cursor      = "pointer";
				estilo.textAlign   = "center";
				estilo.border      = this.options.borderPause;
				estilo.background  = this.options.bgPause;
				estilo.color       = this.options.colorPause;
				estilo.font        = "10px Verdana, Arial, Helvetica, sans-serif";
				estilo.marginLeft  = "6px";
				estilo.marginRight = "3px";
				estilo.fontWeight  = "bold";
				estilo.paddingLeft = "1px";

		
		this.pause.onclick = this.pauseOrPlay.bind(this);	
		
		this.createSlideIndex(ctrl);
		
	},
	
	setFloatStyle :function(elem,op){

		if(window.ActiveXObject){
			elem.style.styleFloat  = op;
		}else{
			elem.setStyle({	
				float    : "right"
			});
		}
	},
	
	
	createSlideIndex :function(ctrl){	
		
		
		var i = this.slideList.len-1;
		
		var index = new Array()
		
		for(; i >-1;i--){
	
			index[i] = this.createDivClass("SlideShowIndex");		
			ctrl.appendChild(index[i]);
				
				// SETANDO ESTILO
				
				estilo = index[i].style;
				
				this.setFloatStyle(index[i],"right");			

				estilo.width      = "13px";
				estilo.height     = "13px";
				estilo.overflow   = "hidden";
				estilo.cursor     = "pointer";
				estilo.textAlign  = "center";
				estilo.border     = this.options.borderIndexInact;
				estilo.color      = this.options.colorIndexAct;
				estilo.background = this.options.bgIndexInact;
				estilo.font       = "10px Verdana, Arial, Helvetica, sans-serif";
				estilo.marginRight= "2px";
				

			
			
			if((i+1)==this.slideList.len){
				estilo.marginRight = "0";
			}
			
			
			var slide = this.slideList.current;
						
			index[i].onclick = this.showSlideIndex.bind(this,slide);
			
			this.slideList.current.register.index = index[i];
			
			this.slideList.prev();
			
			
			index[i].innerHTML = i+1;		
		}
		
		this.index = index;

	},
	
	createDiv :function(id){		
		
		var div = document.createElement("div");	
		div.setAttribute("id",id);
		
		return div;
	},
	
	createDivClass :function(id){		

		var div = document.createElement("div");	
		div.setAttribute("class",id);
		
		return div;
	},	
	
	goto : function(a){
		window.location = a.href;
	}

		
};


