// JavaScript Document
/*var slideMenu=function(){
	var sp,st,t,m,sa,l,w,sw,ot;
	return{
		build:function(sm,sw,mt,s,sl,h){
			sp=s; st=sw; t=mt;
			m=document.getElementById(sm);
			sa=m.getElementsByTagName('li');
			l=sa.length; w=m.offsetWidth; sw=w/l;
			ot=Math.floor((w-st)/(l-1)); var i=0;
			for(i;i<l;i++){s=sa[i]; s.style.width=sw+'px'; this.timer(s)}
			if(sl!=null){m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)}
		},
		timer:function(s){s.onmouseover=function(){clearInterval(m.timer);m.timer=setInterval(function(){slideMenu.slide(s)},t)}},
		slide:function(s){
			var cw=parseInt(s.style.width,'10');
			if(cw<st){
				var owt=0; var i=0;
				for(i;i<l;i++){
					if(sa[i]!=s){
						var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.width,'10');
						if(ow>ot){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi)+'px'}
						owt=owt+(ow-oi)}}
				s.style.width=(w-owt)+'px';
			}else{clearInterval(m.timer)}
		}
	};
}();
window.addEvent("domready", function() {
	slideMenu.build('nav',498,10,3,1);
});
*/

var SliderPanel = new Class({	
	initialize: function(container, options){
		this.options = options;
		this.theContainer=$(container);
		this.panels=this.theContainer.getElements('div.sliderPane');
		this.numberOfPanes=this.panels.length;
		this.widthOfTheContainer=this.theContainer.offsetWidth;
		this.defaultClosedWidth=this.widthOfTheContainer/this.numberOfPanes;
		
		if(this.options['defaultopen']!=null) {
			this.closedWidth=Math.floor((this.widthOfTheContainer-this.options['openwidth'])/(this.numberOfPanes-1));
		} else {
			this.closedWidth = this.defaultClosedWidth;
		}
		
		this.morphPosition = new Fx.Morph($('discover'), {
										   duration: this.options['duration'],
										   transition: this.options['transition']
											});
		this.morphPosition.set({left: ["0px"]});
		
		
		var i=0;
		for(i;i<this.numberOfPanes;i++) {
			this.panels[i].morphToWidth = new Fx.Morph(this.panels[i], {
												duration: this.options['duration'],
												transition: this.options['transition'],
												fps: 30
												});
			
			
			this.panels[i].morphImage = new Fx.Morph(this.panels[i].getElements('img.blur')[0], {
												duration: (parseInt(this.options['duration'])+200),
												transition: this.options['transition']
												});
			
			this.panels[i].morphSubnav = new Fx.Morph(this.panels[i].getElements('dl')[0], {
												duration: (parseInt(this.options['duration'])-200),
												transition: Fx.Transitions.Bounce.easeOut
												});
			
			
			this.panels[i].morphImage.set({opacity: [0.1]});
			this.panels[i].morphSubnav.set({opacity: [0.5]});
			
			this.panels[i].morphToWidth.set({width: ["0px"]
													 //, opacity: [0.7]
													 });
			
			if((this.options['defaultopen']-1) == i) {
				this.panels[i].morphToWidth.start({width: [this.options['openwidth']+"px"]
																		//, opacity:[1]
																		});
				
				this.morphPosition.start({left: [(i*this.closedWidth)+"px"]});
				this.panels[i].morphImage.start({opacity: [1]});
				this.panels[i].morphSubnav.start({opacity: [1]});
			} else {
				this.panels[i].morphToWidth.start({width: [this.closedWidth+"px"]});
			}
			// pass the same options
			this.panels[i].options = this.options;
			this.panels[i].addEvent('mouseenter', this.expand.pass(i, this));
			//this.panels[i].addEvent('mouseleave', this.contract.pass(i, this));
		}
	},
	expand: function(thisel) {
		var thewidth;
		var i=0;		
		var message="";
		this.morphPosition.pause();
//		alert(thisel);
		for(i;i<this.numberOfPanes;i++) {
			this.panels[i].morphSubnav.pause();
			this.panels[i].morphToWidth.pause();
			this.panels[i].morphImage.pause();
			
			if(thisel == i) {
				
				/* DISCOVER MOVEMENT */
				this.morphPosition.start({left: [(i*this.closedWidth)+"px"]});
				
				
				message += "opening: "+i+"\n";
				thewidth = parseInt(this.options['openwidth']);
				// morph it to the open width
				this.panels[i].morphToWidth.start({ width: [thewidth+"px"]
															//, opacity: [1] 
															}); // And other effects can go here!
				this.panels[i].morphImage.start({opacity: [1]});
				this.panels[i].morphSubnav.start({opacity: [1]});
			} else {
				
				if(this.panels[i].offsetWidth != this.closedWidth) {
					message += "closing: "+i+"\n";
					thewidth = parseInt(this.closedWidth);
					this.panels[i].morphToWidth.start({ width: [thewidth+"px"]
																//, opacity: [0.7]
																}); // And other effects can go here!
					this.panels[i].morphImage.start({opacity: [0.1]});
					this.panels[i].morphSubnav.start({opacity: [0.5]});
				}
			
			}
		}
		//alert(message);
		return false;
	},
	contract: function(thisel) {
		var thewidth;
		var i=0;		
		var message="";
//		alert(thisel);
		if(this.options['defaultopen']!=null) {
			for(i;i<this.numberOfPanes;i++) {			
				if(i != this.options['defaultopen']) {
					message += "closing: "+i+"\n";
					thewidth = parseInt(this.closedWidth);
					this.panels[i].morphToWidth.morph({ width: [thewidth+"px"]
																//, opacity: [0.7]
																}); // And other effects can go here!
					this.panels[i].morphImage.morph({opacity: [0]});
					this.panels[i].morphSubnav.morph({opacity: [0.2]});
				} else {
					this.panels[i].morphToWidth.morph({width: [parseInt(this.options['openwidth'])+"px"]});
					this.panels[i].morphImage.morph({opacity: [1]});
					this.panels[i].morphSubnav.morph({opacity: [1]});
				}
			}
			this.morphPosition.morph({left: [(i*this.closedWidth)+"px"]});
		}
		//alert(message);
	}
});

window.addEvent("domready", function() {
	
	var slidingPanelArea = new SliderPanel('nav-panels', {
	  duration: 500, // howlong should the transition last?
	  //transition: Fx.Transitions.Sine.easeOut, // Type of transition
	  //transition: Fx.Transitions.Bounce.easeOut, // Type of transition
	  //transition: Fx.Transitions.Elastic.easeOut, // Type of transition
	  transition: Fx.Transitions.Quart.easeOut, // Type of transition
	  //transition: Fx.Transitions.Linear, // Type of transition
	  openwidth: 500, // full width when mouse over
	  delay:10, // how long to wait before animating
	  defaultopen:1
	});
	
	
	
});

/*
this.panels[i].morphSubnav = new Fx.Morph(this.panels[i].getElements('dl')[0], {
												duration: (parseInt(this.options['duration'])-200),
												transition: Fx.Transitions.Bounce.easeOut
												});

this.panels[i].morphSubnav.start({left: ["0px"]});
this.panels[i].morphSubnav.set({left: ["-300px"]});
this.panels[i].morphSubnav.start({left: ["-300px"]});
*/