/**
 * @fileOverview This file contains all Panels (Modals) code
 * @author <a href='http://wiki.element115.net/index.php/User:Schopra'>schopra</a> 
 */

var panelObject = Class.create(
	/** 
	 * @lends panelObject.prototype
	 * 
	 */
	{
	/**
	 * Creates an instance of panelObject
	 * 
	 * @author <a href='http://wiki.element115.net/index.php/User:Schopra'>schopra</a> 
	 * @this {panelObject}
	 * @param {Object} options
	 * @example options = {
			 html: html, (required, html string or html DOM element)
			 panelid: panelid, (required, usually "panel_media")
			 width: width (required integer, no pixels)
	 }
	 * @constructs
	 * 
	 */
	initialize: function(options){
		this.options = options;
		
		this.wrapper = new Element("div",{"id":this.options.panelid}).addClassName("panel_media");
		
		// attempts to add the following fields: title, duration, date, description
		if(this.options.html){
			eHA.log.create("found html, adding it to panel_media wrapper",3);
			//this.metaData = new Element("div").addClassName("meta_data").update(this.options.html);
			this.wrapper.insert({'bottom':this.options.html});
		}
		return this;
	},
	/**
	 * Inserts this panelObject into panels
	 * @function
	 */
	insert: function(){
		try{
			eHA.log.create("setting widths for panel_media div and close button",3);
			this.wrapper.setStyle({
				width: this.options.width+"px"
			});
			panels.close_button.setStyle({
				width: this.options.width+"px"
			});
			eHA.log.create("inserting panel_media DIV into panels",3);
			panels.media_panel.insert({bottom:this.wrapper});
			this.wrapper.appear({duration:panels.duration});
		}catch(err){
			eHA.log.create(err.toString(),1);
		}
	}
});

/**
 * panels (backdrop panels)
 * @namespace
 */
var panels = {
	opacity: 0.7,
	duration: 0.6,
	/**
	 * Constructs HTML panels.  Assigns some events
	 * @function
	 */
	construct: function(){
		if($('media_panel')==null){
			this.media_panel = new Element('div',{'id':"media_panel"});
			this.backdrop_panel = new Element('div',{'id':"backdrop_panel"});
			$$("body")[0].insert({'bottom':this.media_panel});
			$$("body")[0].insert({'bottom':this.backdrop_panel});
			// create the close button
			var panelCloseAnchor = new Element('a',{'href':'javascript:void(0)'}).update("close");
			this.close_button = new Element('div',{'id':'close_media_panel'}).update(panelCloseAnchor);
			this.media_panel.insert({'bottom':this.close_button});
			
			this.close_button.observe("click",function(event){
				event.stop();
				this.close();
			}.bind(this));
			
			this.media_panel.observe('click',function(evt){
				if(this.media_panel==Event.element(evt)){
					this.close();
				}
			}.bind(this));
			
			// NOTE: the color must come from CSS, black is recommended
			// #backdrop_panel { background: #000; }
			this.backdrop_panel.setStyle({
				zIndex: "10000",
				display: "none"
			});
			
			this.media_panel.setStyle({
				zIndex: "10001",
				display: "none"
			});
	
			if(Prototype.Browser.IE6){
				this.backdrop_panel.setStyle({
					position: "absolute"
				});
				
				this.media_panel.setStyle({
					position: "absolute"
				});
			}else{
				this.backdrop_panel.setStyle({
					position: "fixed",
					top: "0px",
					left: "0px",
					width: "100%",
					height: "100%"
				});
				
				this.media_panel.setStyle({
					position: "fixed",
					top: "0px",
					left: "0px",
					width: "100%",
					height: "100%"
				});
			}
			this.close_button.hide();
		}
		return this;
	},
	/**
	 * "Appears" panels
	 * @function
	 */
	appear: function(){
		if(Prototype.Browser.IE6){
			// position the panel in the viewable area
			this.scroll();
			// select boxes get in the way for IE6
			$$("body select").each(function(element){
				element.setStyle({
					visibility: "hidden"
				});
			});
			$$("body")[0].setStyle({
				position: "relative"
			});
			Event.observe(window,'scroll',this.scroll.bind(this));
		}
		
		if(Prototype.Browser.IE){
			// height & width = 100% fails for IE
			this.resize();
			Event.observe(window,'resize',this.resize.bind(this));
		}
		
		Event.observe(window,'keypress',this.escKey);
		
		this.backdrop_panel.appear({duration:this.duration,from:0.0,to:this.opacity});
		this.media_panel.appear({duration:this.duration,delay:this.duration});
		this.close_button.appear({duration:this.duration,delay:this.duration,afterFinish:function(){this.close_button.show();}.bind(this)});
		
		return this;
	},
	/**
	 * Closes panels with fade (with delay on close button)
	 * @function
	 */
	close: function(){
		var fadeArray = new Array();
		if($("panel_media")){
			fadeArray.push(eval("new Effect.Fade('panel_media',{sync:true})"));
		}
		
		fadeArray.push(eval("new Effect.Fade('"+this.close_button.id+"',{sync:true})"));
		fadeArray.push(eval("new Effect.Fade('"+this.backdrop_panel.id+"',{sync:true})"));
		fadeArray.push(eval("new Effect.Fade('"+this.media_panel.id+"',{sync:true})"));

		/*
		this.close_button.fade({duration:this.duration});
		this.backdrop_panel.fade({duration:this.duration});
		this.media_panel.fade({duration:this.duration});
		*/
		new Effect.Parallel(fadeArray,{duration:this.duration,afterFinish:function(){
			if($("panel_media")){
				$("panel_media").remove();
			}
		}});
		
		Event.stopObserving(window,'keypress',this.escKey);
		
		if(Prototype.Browser.IE6){
			Event.stopObserving(window,'scroll',this.scroll.bind(this));
			$$("body")[0].setStyle({
				position: "static"
			});
			$$("body select").each(function(element){
				element.setStyle({
					visibility: "visible"
				});
			});
		}
		
		if(Prototype.Browser.IE){
			Event.stopObserving(window,'resize',this.resize.bind(this));
		}

		
		return this;
	},
	/**
	 * Resizing function for use with IE
	 * @function
	 */
	resize: function(){
		if(Prototype.Browser.IE){
			//alert(this);
			// reassign sizes to panels (only needed for IE)
			this.backdrop_panel.setStyle({
				width: document.viewport.getWidth()+"px",
				height: document.viewport.getHeight()+"px"
			});
			
			this.media_panel.setStyle({
				width: document.viewport.getWidth()+"px",
				height: document.viewport.getHeight()+"px"
			});
		}
		return this;
	},
	/**
	 * Scroll adjustment function for use with IE6
	 * @function
	 */
	scroll: function(){
		if(Prototype.Browser.IE6){
			this.backdrop_panel.setStyle({
				top: document.viewport.getScrollOffsets()[1]+"px",
				left: document.viewport.getScrollOffsets()[0]+"px"
			});
			
			this.media_panel.setStyle({
				top: document.viewport.getScrollOffsets()[1]+"px",
				left: document.viewport.getScrollOffsets()[0]+"px"
			});
		}
		
		return this;
	},
	/**
	 * Handles escape key usage to close panels
	 * @function
	 * @param {Event} e
	 */
	escKey: function(e){
		var kC = (window.event)?event.keyCode:e.keyCode;
		var Esc = (window.event)?27:e.DOM_VK_ESCAPE;
		if(kC==Esc) panels.close();
	}
};