// -----------------------------------------------------------------------------------
//	Overlay v 0.1
//	by t gillis - http://erstwhile.net
//  MIT Licensed
//  Borrows from Lightbox.js by Lokesh Dhakar - http://www.lokeshdhakar.com
//
//	
//
// -----------------------------------------------------------------------------------



Overlay = Class.create();


//event biding framework courtesy of glider.js
Object.extend(Object.extend(Overlay.prototype, Abstract.prototype), {
	//initialize 
	duration: 0.4,
	transition: Effect.Transitions.sinoidal,
	overlayContainer: "overlay-container",
	afterFinish: function(){},
	closeDiv: null,
	closeDivClass: "div.close",
	closeOnScrim: true,
	
	initialize: function(element){
		this.events = {
			scrimClicked: this.scrimClicked.bind(this),
			closeClicked: this.closeClicked.bind(this),
			triggerClicked: this.triggerClicked.bind(this)
		};
		//get content layer
		//layer to be shown in overlay must already exist on the page
		this.element = $(element);
		this.overlayContainer = $(this.overlayContainer);
		//create the scrim and overlay
		this.closeDiv = element.select(this.closeDivClass).first();
		this.element.absolutize();	
	},
	//observers
	setTrigger:function(trigger){
		this.trigger = $(trigger);
		this.trigger.observe("click",this.events.triggerClicked);
		
	},
	addObservers: function(){
		//close scrim on click
		this.scrim.observe("click", this.events.scrimClicked);
		if (this.closeDiv){
			this.closeDiv.observe("click", this.events.closeClicked);
		}

	},
	triggerClicked: function(){
		this.showOverlay();
	},
	//set overlay	
	scrimClicked: function(event){
		Event.stop(event);
		if (this.closeOnScrim){
			//if the event propagated from the overlay itself, stop it
			this.closeOverlay();
		}
	},
	
	closeClicked: function(event) {
		Event.stop(event);
		this.closeOverlay();
	},
	
	showOverlay: function(){
		//hide things that would show through

// tested in safari, ff, ie 7
//		$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });

		//need to get the width now for centering later
		var w = this.element.getWidth();

		//all of this has to happen when the overlay is activated, not when the object is instantiated
		this.scrim = new Element("div");
		this.scrim.addClassName("scrim");
		this.overlay = new Element("div");
		this.overlay.addClassName("overlay");
		this.overlay.absolutize();
		this.overlay.setStyle({width:w+"px"});
		this.addObservers();
	
		//replace the DOM node we want with a placeholder element
		this.placeholder = new Element("div");
		this.placeholder.addClassName("placeholder");
		this.element = this.element.replace(this.placeholder);	
		//insert the content element into the overlay
	
		this.overlay.insert(this.element);
		this.scrim.hide();
		this.scrim.insert(this.overlay);
		this.placeholder.insert(this.scrim);
		this.overlay.hide();
		this.element.show();
		//put the overlay on top
		Effect.Appear(this.scrim,{duration:this.duration, transition:this.transition, afterFinish:(function(){
			this.overlay.setStyle({zIndex:this.scrim.getStyle("z-index")+1});
			this.element.setStyle({zIndex:this.scrim.getStyle("z-index")+2});
			this.scrim.alwaysFullWindow();
			this.element.setStyle({left:(docWidth() * 0.5) - (w * 0.5)+"px"});
			Effect.Appear(this.overlay,{duration:this.duration, transition:this.transition, beforeStart:(function(){
				this.scrim.fullWindow();
				//have to center this manually
				//TODO make element.center() work here
				this.element.setStyle({left:(docWidth() * 0.5) - (w * 0.5)+"px"});

      if(this.element.id == "documentary_div")
        this.element.setStyle({top:"120px"});

			}).bind(this), 
			afterFinish:(function(){
//				this.element.alwaysCentered();
			}).bind(this)});
		}).bind(this)});
		},
	closeOverlay: function(){
		//return the content element to its home node
		Effect.Fade(this.overlay,{duration:this.duration, transition:this.transition, afterFinish:(function(){
			this.element.hide();
			this.closeDiv.stopObserving();
			Effect.Fade(this.scrim,{duration:this.duration, transition:this.transition, afterFinish:(function(){
				//delete scrim and content display elements
				this.overlay.remove();
				this.scrim.remove();
				this.placeholder.replace(this.element);
				//restore hidden page elements
				$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
				this.afterFinish();
			}).bind(this)})}).bind(this)
		});
	}
});