var SlidePanel = new Class ({
	Implements: [Options, Events],
	Extends: Fx.Slide,
	
	options: {
		target: "aside",
		transition: Fx.Transitions.Expo.easeOut,
		duration: 400,
		open: false,
		open_text: "Show Panel",
		close_text: "Hide Panel"
	},
	
	initialize: function(options) {
		
		var self = this;
		
		var open = "-175px";
		var closed = "0px";

		this.setOptions(options);
		this._dom();
		
		if($('image-container')) {
			$('image-container').morph = new Fx.Morph('image-container', {transition: Fx.Transitions.Expo.easeOut, duration: 400});
		}
		
		return this;
		
	},
	
	_dom: function() {
		
		var self = this;
		
		// get a base id
		var base_id = null;
		switch(typeOf(this.options.target)) {
			case "element": base_id = this.options.target.get("id"); break;
			case "string": base_id = this.options.target; break;
		}
		
		this.panel = $(this.options.target);
		this._setPanelHeight();
		this.panel.is_open = this.options.open;
		
		this.panel.addClass( (this.panel.is_open) ? "open" : "closed" );
		
		// open and closed dimensions.
		this.panel.openPosition = 0;
		this.panel.closePosition = - (this.panel.getSize().x - 40);
		
		this.panel.tabControl = new Element("a", {
			
			href: "#",
			id: base_id + "-tab-control",
			title: self._setTabControlText(),
			text: self._setTabControlText(),
			
			events: {
				"click": function(evt) {
					
					evt.stop();
					self.toggle();
					
				}
			}
			
		}).inject(this.panel);
		
		this.panel.slider = new Fx.Morph(this.panel, {
			
			transition: self.options.transition,
			duration: self.options.duration
			
		});
		
		this.panel.slider.set({"right" : this.panel.is_open ? this.panel.openPosition : this.panel.closePosition });
		
	},
	
	_setPanelHeight: function() {
		
		if (this.panel.getSize().y > this.panel.getParent().getSize().y) {
			
			this.panel.getParent().setStyle("min-height", this.panel.getSize().y);
			
		} else {
			
			var padding_top = Number.from(this.panel.getStyle("padding-top"));
			var padding_bottom = Number.from(this.panel.getStyle("padding-bottom"));
			
			this.panel.setStyle("min-height", this.panel.getParent().getSize().y - (padding_top + padding_bottom));
			
		}
		
	},
	
	_setTabControlText: function() {
		
		return (this.panel.is_open) ? this.options.close_text : this.options.open_text;
		
	},
	
	
	open: function() {
		
		if (!this.panel.is_open) {
			
			//alert('open');
			// animate to open
			this.panel.slider.cancel().start({ "right" : this.panel.openPosition });
			this.panel.removeClass("closed").addClass("open");
			this.panel.tabControl.removeClass("close").addClass("open");
			this.panel.tabControl.set("text", this._setTabControlText());
			this.panel.is_open = true;
			
			if($('image-container')) {
				$('image-container').morph.start({"left":-175});
				//$('image-container').setStyle("left",-175);
			}
			
		}
		
		
	},
	
	close: function() {
		
		if (this.panel.is_open) {
			
			//alert('closed');
			// animate to close
			this.panel.slider.cancel().start({ "right" : this.panel.closePosition });
			this.panel.removeClass("open").addClass("closed");
			this.panel.tabControl.set("text", this._setTabControlText());
			this.panel.is_open = false;
			
			if($('image-container')) {
				//$('image-container').setStyle("left",0);
				$('image-container').morph.start({"left":0});
			}
		
		}
		
	},
	
	toggle: function() {
		
		if (this.panel.is_open) {
			
			this.close();
			
		} else {
			
			this.open();
			
		}
		
	}

});

// Old slidePanel
// var slidePanel = new Class({
// 	
// 	
//     initialize: function(slideObject,slideContainer,startPos,img){
//     	
//     	var self = this;
//     	
//     	var slideElement = slideObject;
//     	var container = slideContainer;
//     	var offset = 0;
//     	if(slideElement.get("id") == "aside") {
//     		offset = 30;
//     	}
//     	var paneltab = new Element ( 'img' , { 'src' : img , 'class' :  'slidetab' }).inject(slideElement,'top');
//   
//     	var imgsrc = paneltab.getProperty('src');
//     	var openpos = container.getSize().x - slideElement.getSize().x;
//     	var closedpos = (container.getSize().x - paneltab.getSize().x)-10;
//     	
//     	paneltab.setStyle("margin-top",(slideElement.getSize().y/2)-(paneltab.getSize().y/2)-offset);
//     	var currentpos = startPos;
//     	var slidePanel = new Fx.Morph(slideElement, {duration: 400, transition: Fx.Transitions.Expo.easeOut});
//     	
//     	if(currentpos == 1) {
// 			slideElement.setStyle("left",openpos);
// 			var newsrc = imgsrc.replace("closed",'open');
// 			paneltab.setProperty('src',newsrc);
// 		} else {
// 			slideElement.setStyle("left",closedpos);
// 			var newsrc = imgsrc.replace("open",'closed');
// 			paneltab.setProperty('src',newsrc);
// 		}
// 		
// 		paneltab.addEvent("click", function() {
// 			
// 			if(currentpos == 0) {
// 				slidePanel.start({ 'left': openpos });
// 				currentpos = 1;
// 				newsrc = imgsrc.replace("closed",'open');
// 				paneltab.setProperty('src',newsrc);
// 			} else {
// 				slidePanel.start({ 'left': closedpos });
// 				currentpos = 0;
// 				newsrc = imgsrc.replace("open",'closed');
// 				paneltab.setProperty('src',newsrc);
// 			}
// 				
// 		});
// 		
//     }
// 		
// });