// JavaScript Document

var JFDPanel = new Class({
	 //implements
	Implements: [Options, Events],
	
	//properties
	opened:false,
	bindedFunctions:{},
	elements:{},
	sizes:{},
	effects:{},
	plugins:{},
	knobDragged:false,
	
	//options
	options: {
		id				: "",
		childWidth		: 0,
		buttonPosition	: 0,
		onShowOverlay	: new Class(),
		onHideOverlay	: new Class()
	},
	
	//initializator
	initialize: function(options) {
		this.setOptions(options);
		this.initBindedFunctions();
		this.initElements();
		this.initEvents();
		this.initEffects();
		this.resize();
		this.initStyles();
		
	},
	
	initBindedFunctions: function() {
		this.bindedFunctions = {
			resize			: this.resize.bind(this),
			dragComplete	: this.dragComplete.bind(this),
			sliderChange	: this.sliderChange.bind(this),
			dragStart		: this.dragStart.bind(this),
			sliderCompleted	: this.sliderCompleted.bind(this),
			openCompleted	: this.openCompleted.bind(this),
			setPanelZindex	: this.setPanelZindex.bind(this)
		}
	},
	
	initElements: function() {
		this.elements.panel 		= $(this.options.id).setStyle('display', 'block');
		this.elements.shadow 		= new Element('div').addClass('shadow').inject(this.elements.panel);
		this.elements.slider 		= new Element('div').addClass('slider').inject(this.elements.panel);
		this.elements.knob 			= new Element('div').addClass('knob').inject(this.elements.slider);
		this.elements.panelContent	= this.elements.panel.getFirst().getNext();
		this.elements.button		= this.elements.panel.getElement('.button');
		this.elements.button.bottomMove = this.elements.button.getStyle('bottom').toInt();
	},
	
	initEvents: function() {
		window.addEvent('resize', this.bindedFunctions.resize);
	},
	
	initStyles: function() {
		this.elements.button.setProperty('href', 'javascript://');
		this.elements.panel.setStyles({
			top 		: -this.sizes.panel.y + 10
		});
	},
	
	initPlugins: function() {
		if(this.plugins.drag) this.plugins.drag.detach();
		if(this.plugins.slider) this.plugins.slider.detach();
		
		this.plugins =  {
			drag	: new Drag(this.elements.panel, {
				handle		: this.elements.button,
				modifiers	: {'x': null, 'y': 'top'},
				onComplete	: this.bindedFunctions.dragComplete,
				onStart		: this.bindedFunctions.dragStart
			})			
		};
		
		if(this.sizes.panel.x > this.sizes.window.x) {
			if(!this.elements.slider) {
				this.elements.slider 		= new Element('div').addClass('slider').inject(this.elements.panel);
				this.elements.knob 			= new Element('div').addClass('knob').inject(this.elements.slider);
			}
			this.elements.slider.setStyles('width', this.sizes.window.x);
			var percent = (this.sizes.window.x/this.sizes.panel.x);
			this.elements.knob.setStyle('width', percent*this.sizes.window.x);
			this.plugins.slider	= new Slider(this.elements.slider, this.elements.knob, {
				steps		: 100,
				onChange	: this.bindedFunctions.sliderChange,
				onComplete	: this.bindedFunctions.sliderCompleted
			});
			this.elements.knob.addEvent('mouseover', this.knobMouseOverHandler.bind(this));
			this.elements.knob.addEvent('mouseout', this.knobMouseOutHandler.bind(this));
			this.elements.knob.addEvent('mousedown', this.knobMouseDownHandler.bind(this));
			this.effects.knob = new Fx.Tween(this.elements.knob, {duration:500, transition:Fx.Transitions.Expo.easeOut});
			this.effects.slider_shadow = new Fx.Elements([this.elements.slider, this.elements.shadow, this.elements.button], {
				duration: 300,
				transition: Fx.Transitions.Expo.easeOut
			})
			if(this.opened) {
				this.effects.slider_shadow.cancel().start({
					'0':{height:6},
					'1':{bottom:-34},
					'2':{bottom:this.elements.button.bottomMove-8}
				});
				if(!Browser.Engine.trident) if(this.elements.slider) this.elements.slider.setStyle('overflow', 'visible');
			}
		} else {
			if(this.elements.slider) {
				this.elements.knob.removeEvents('mouseover');
				this.elements.knob.removeEvents('mouseout');
				this.elements.knob.removeEvents('mousedown');
				
				this.elements.slider.destroy();
				this.elements.slider = null;
				this.effects.slider_shadow.cancel().start({
					'0':{height:0},
					'1':{bottom:-26},
					'2':{bottom:this.elements.button.bottomMove}
				});
			}
		}
	},
	
	knobMouseOverHandler: function() {
		this.effects.knob.cancel().start('height', 20);
	},
	
	knobMouseOutHandler: function() {
		if(!this.knobDragged) this.effects.knob.cancel().start('height', 6);
	},
	
	knobMouseDownHandler: function() {
		this.knobDragged = true;
		this.effects.knob.cancel().start('height', 20);
	},
	
	sliderCompleted: function() {
		this.knobDragged = false;
		this.effects.knob.cancel().start('height', 6);
	},
	
	initEffects: function() {
		this.effects = {
			panel			: new Fx.Tween(this.elements.panel, {
				duration: 1000,
				transition: Fx.Transitions.Expo.easeOut
			}),
			panelContent	: new Fx.Tween(this.elements.panelContent, {
				duration: 500,
				transition: Fx.Transitions.Expo.easeOut
			}),
			slider_shadow	: new Fx.Elements([this.elements.slider, this.elements.shadow, this.elements.button], {
				duration: 300,
				transition: Fx.Transitions.Expo.easeOut
			})
		};
	},
	
	resize: function() {
		this.setSizes();
		this.elements.button.setStyle('left', this.sizes.window.x * (this.options.buttonPosition/100));
		this.elements.panelContent.setStyles({
			width	: this.sizes.panel.x,
			left	: 0
		});
		this.elements.shadow.setStyle('width', this.sizes.panel.x);
		this.elements.panel.setStyles({
			height	: this.sizes.panel.y,
			width	: this.sizes.panel.x
		});
		if(this.elements.slider) {
			this.elements.slider.setStyle('width', this.sizes.window.x);
			var percent = (this.sizes.window.x/this.sizes.panel.x);
			this.elements.knob.setStyle('width', percent*this.sizes.window.x);
		}
		this.initPlugins();
	},
	
	setSizes: function() {
		this.sizes.window =	window.getSize();
		var panelWidth = 0;
		this.elements.panelContent.getChildren().each(function(el, index, array) {
			if(index>=array.length-1) return null;
			panelWidth += el.getSize().x;									   
		}, this);
		if(panelWidth<this.sizes.window.x) panelWidth = this.sizes.window.x;
		this.sizes.panel = {x:panelWidth};
		this.elements.panelContent.setStyle('width', this.sizes.panel.x);
		this.sizes.panel.y = this.elements.panelContent.getSize().y;		
		this.sizes.panelContent =  {
			x:this.sizes.panel.x, 
			y:this.sizes.panel.y
		};
	},
	
	dragComplete: function(el) {
		if(!this.opened) this.open();
		else this.close();
	},
	
	open: function() {
		if(pageTracker) pageTracker._trackEvent(this.options.id, "Open");
		
		window.location.href = '#/'+this.options.id;
		this.elements.panel.setStyle('z-index', 102);
		
		this.opened = true;
		this.effects.panel.cancel().start('top', 0);
		this.effects.panel.removeEvent('complete', this.bindedFunctions.setPanelZindex);
		this.effects.panel.addEvent('complete', this.bindedFunctions.openCompleted);
		if(this.elements.slider) {
			this.effects.slider_shadow.cancel().start({
				'0':{height:6},
				'1':{bottom:-34},
				'2':{bottom:this.elements.button.bottomMove-8}
			});
		}
		
		this.fireEvent('showOverlay', [100, this.close.bind(this)]);
	},
	
	openCompleted: function() {
		this.effects.panel.removeEvent('complete', this.bindedFunctions.openCompleted);
		if(!Browser.Engine.trident) if(this.elements.slider) this.elements.slider.setStyle('overflow', 'visible');
	},
	
	close: function() {
		window.location.href = '#/';
		if(pageTracker) pageTracker._trackEvent(this.options.id, "Close");
		
		this.opened = false;
		this.effects.panel.addEvent('complete', this.bindedFunctions.setPanelZindex);
		this.effects.panel.removeEvent('complete', this.bindedFunctions.openCompleted);
		this.effects.panel.cancel().start('top', -this.sizes.panel.y+10);
		if(this.elements.slider) {
			this.effects.slider_shadow.cancel().start({
				'0':{height:0},
				'1':{bottom:-26},
				'2':{bottom:this.elements.button.bottomMove}
			});
		}
		if(this.elements.slider) this.elements.slider.setStyle('overflow', 'hidden');
		
		this.fireEvent('hideOverlay');
	},
	
	setPanelZindex: function() {
		this.effects.panel.removeEvents('complete');
		this.elements.panel.setStyle('z-index', 101);
		if(this.elements.slider) this.elements.slider.setStyle('overflow', 'hidden');
	},
	
	dragStart: function() {
		this.elements.panel.setStyle('z-index', 102);
		this.effects.panel.cancel();
		this.effects.slider_shadow.cancel();
	},
	
	sliderChange: function(value) {
		var newX = -(this.sizes.panel.x+20-this.sizes.window.x)*(value/100);
		this.effects.panelContent.cancel().start('left', newX);
	}
	
});