dojo.provide("sp.ContentSlider");
dojo.require("dojo.fx.easing");
dojo.require("dojox.fx.scroll");
dojo.addOnLoad(function(){
			dojo.back.setInitialState({});
		});


dojo.declare("sp.ContentSlider", null, {
	
	msSpeed: 300,
	speedIsPerPanel:true,
	paneHeight: 450,
	
	constructor: function(options, node){
		
		dojo.mixin(this, options);
		this._cons = [];
		this.domNode = node;
		this.currentTop = 0;
		this.currentLeft = 0;
		
		this.paneWidth = 0;
		var totalWidth = 0;
		
		
		this.containerNode = dojo.query(".contentSliderContainer", this.domNode)[0];
		this.listNode =  dojo.query(".contentSliderList", this.domNode)[0];
		
		this.paneWidth = dojo.marginBox(this.containerNode).w;
		
		this.listChildren = dojo.query(".contentSliderList > div", this.domNode).forEach(function(n){
			
			// not setting the height here because we need to
			// find the tallest and then set them all to that
			var box = dojo.marginBox(n);
			totalWidth += box.w;
		}, this);
	
		dojo.style(this.containerNode, {
			height: this.paneHeight+"px"
		});
		
		dojo.style(this.listNode, {
			height: this.paneHeight+"px",
			width:totalWidth+"px",
			left:"0px"
		});
		
		
		this.sideNav =  dojo.query(".sidebar", this.domNode)[0];
		this.sideBtns = dojo.query(".planContent > div", this.domNode); 
		this.bottomNav = dojo.query(".shelf")[0];
		this.botBtns = dojo.query(".movieContainer");
		
		
		this.map = {};
		this.listChildren.forEach(function(n, index){
			var i = index - 1;
			dojo.style(n, {
				position:"absolute",
				top:"0px",
				left:index*this.paneWidth+"px",
				width:this.paneWidth+"px",
				height: this.paneHeight+"px"
			});
			
			if(!n.id){ console.warn("ContentSlider children must all have IDs", n)}
			
			var sideBtn = i==-1 ? null : this.sideBtns[i];
			var botBtn  = i==-1 ? null : this.botBtns[i];
			this.map[n.id] = {
				item:n,
				index:index,
				sideBtn:sideBtn,
				botBtn:botBtn
			};
			
			
			if(!sideBtn){ return; }
			
			dojo.attr(sideBtn, "listid", n.id);
			this._cons.push(dojo.connect(sideBtn, "click", this, function(evt){
				dojo.stopEvent(evt);
				this.onClick(evt);	
			}));
			if(botBtn){
				dojo.attr(botBtn, "listid", n.id);
				this._cons.push(dojo.connect(botBtn, "click", this, function(evt){
					//dojo.stopEvent(evt);
					this.onClick(evt);	
				}));
			}
		}, this);
		
		var hash = this.getHash();
		if(hash){
			hash = /_/.test(hash) ? hash.split("_")[1] : hash;
			this.onHash(hash);
		}
		dojo.back.init();
		dojo.back.setInitialState({changeUrl:false, back:dojo.hitch(this, "onHash"), forward:dojo.hitch(this, "onHash")});
		
	},
	getHash: function(){ 
		var h = window.location.hash;
		if(h.charAt(0) == "#"){ h = h.substring(1); }
		return dojo.isMozilla ? h : decodeURIComponent(h); 
	},
	
	onHash: function(id){
		//alert("onHash:---->" + id);
		this.nav(id);
	},
	
	onClick: function(evt){
		var node = evt.target; 
		while (!dojo.attr(node, "listid")){
			node = node.parentNode;
			if(node.tagName.toLowerCase()=="body"){
				break;
			}
		}
		var id = dojo.attr(node, "listid");
		dojo.back.addToHistory({changeUrl:"page_"+id, back:dojo.hitch(this, "onHash", id), forward:dojo.hitch(this, "onHash", id)});
		this.nav(id, node);
		var anim = dojox.fx.smoothScroll({
			node: document.body,
			win:window,
			duration:400,
			easing:dojo.fx.easing.easeOut
		}).play();
		
	},
	
	nav: function(id){
		
		var left = id ? this.paneWidth * this.map[id].index * -1 : 0;
		var dur = this.msSpeed;
		if(this.speedIsPerPanel){
			var ct = Math.abs(this.currentLeft);
			var nt = Math.abs(left);
			var diff = ct > nt ? ct - nt : nt - ct;
			dur = dur * (diff / this.paneWidth);
		}
		
		//console.log("ANIM TO:", dur, "::", left, "from:", this.currentLeft, this.listNode);
		dojo.animateProperty({ node: this.listNode, duration:dur,
			easing: dojo.fx.easing.quadOut,// we don't want too extreme of an ease
			properties: {
				left: { start: this.currentLeft, end: left, units:"px" }
			}
		}).play();
		this.currentLeft = left;
		if(this._prevId){
			//dojo.removeClass(this.bottomNav, this._prevId);
			dojo.removeClass(this.sideNav, this._prevId);
		}
		if(id){
			//dojo.addClass(this.bottomNav, id);
			dojo.addClass(this.sideNav, id);
		}
		this._prevId = id;
		
	}
});