var panelObject = Class.create({
	initialize: function(obj){
		this.parent = obj;
		
		this.wrapper = new Element("div",{"id":this.parent.properties.panelid}).addClassName("panel_media");
		this.wrapper.update("<div id='"+this.parent.properties.embed_id+"'>panel media</div>");
		
		// attempts to add the following fields: title, duration, date, description
		if(this.parent.properties.title || this.parent.properties.duration || this.parent.properties.date || this.parent.properties.description){
			this.metaData = new Element("div").addClassName("meta_data");
			
			if(this.parent.properties.title)
				this.metaData.insert({'bottom':new Element("h4").update(this.parent.properties.title)});
			if(this.parent.properties.duration)
				this.metaData.insert({'bottom':new Element("span").addClassName("duration").update(this.parent.properties.duration)});
			if(this.parent.properties.date)
				this.metaData.insert({'bottom':new Element("span").addClassName("date").update(this.parent.properties.date)});
			if(this.parent.properties.description)
				this.metaData.insert({'bottom':new Element("p").update(this.parent.properties.description)});
			
			this.wrapper.insert({'bottom':this.metaData});
		}
		
		this.wrapper.setStyle({
			width: this.parent.properties.width+"px"
		});

		return this;
	},
	insert: function(){
		panels.media_panel.insert({"bottom":this.wrapper});
		panels.close_button.setStyle({
			width: this.parent.properties.width+"px"
		});
	}
});

var panels = {
	opacity: 0.7,
	duration: 0.6,
	construct: function(){
		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.onclick = function(){
			panels.close();
			return false;
		}
		
		// 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"
			});
			this.media_panel.setStyle({
				position: "fixed",
				top: "0px",
				left: "0px"
			});
		}
		this.close_button.hide();
		
		return this;
	},
	appear: function(){
		this.resize();
		if(Prototype.Browser.IE6){
			this.scroll();
			// select boxes get in the way for IE6
			$$("body select").each(function(element){
				element.setStyle({
					visibility: "hidden"
				});
			});
			$$("body")[0].setStyle({
				position: "relative"
			});
			//FF uses width:100px;height:100px;
			// and doesn't require these events to trigger functions
			if(Prototype.Browser.IE){
				Event.observe(window,'scroll',this.scroll);
				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});
		
		return this;
	},
	close: function(){
		if($("panel_media"))
			$("panel_media").remove();
		this.close_button.fade({delay:this.duration});
		this.backdrop_panel.fade({duration:this.duration});
		this.media_panel.fade({duration:this.duration});
		
		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"
				});
			});
		}
		return this;
	},
	resize: function(){
		// reassign sizes to panels
		if(Prototype.Browser.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"
			});
		}
		// FF you can get away with width:100px;height:100px;
		// then we don't even need to call resize and scroll
		// when the window changes
		else {
			this.backdrop_panel.setStyle({
				width: '100%',
				height: '100%'
			});
			this.media_panel.setStyle({
				width: '100%',
				height: '100%'
			});
		}
		return this;
	},
	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"
			});
		}else{
			// nothing necessary
		}
	},
	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();
	}
};