// -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-
//
//	Macbox v0.05
//	by Daniel Macias - http://www.danmacias.com
//	Last Modification: 9/25/09
//
//	For more information, visit:
//	http://www.danmacias.com/macbox
//
//	Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
//  	- Free for use in both personal and commercial projects
//		- Attribution requires leaving author name, author link, and the license info intact.
//
//  !!!  Include Prototype and SWFObject Libraries
//  
// -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-

var MacBox = Class.create({
		background : new Element('div', {'id': 'macbox_bg'}),
		container: new Element('div', {'id': 'macbox_container'}),
		infoHolder: new Element('div', {'id': 'macbox_info_holder'}),
		description: new Element('p', {'id': 'macbox_description'}),
		exitButton: new Element('a', {'id': 'macbox_exit_btn', 
									  'alt': 'Exit Window Button',
									  'title': 'Click here to Exit this Window'}),
		screenshot: new Element('img', {'id': 'macbox_screenshot'}),
		swfContainer: new Element('object', {'id': 'macbox_swf_container'}),
		macboxLinks : [],
		preloader: new Element('img', {'id': 'macbox_preloader'}),
		
		initialize: function(){
			//Set Properties
			this.macboxImagePath = '/wp-content/themes/dans_playground/js/macbox/images/';
			this.macboxLinks = $$('a[rel="macbox"]').findAll(function(link) { return link.readAttribute('href').length != 0 });
			//Function Calls
			this.createUIElements();
			this.setupHandlers();
			this.setupAnchors();

		},
		
		createUIElements: function(){
			//Background			
			this.background.setStyle({zIndex: 50, position: 'absolute', top: 0, left: 0, width: document.viewport.getWidth() + 'px', height: $(document.body).getHeight() + 'px', background: 'url(' + this.macboxImagePath + 'shade.png) repeat'});			
			this.background.hide();
			$(document.body).insert(this.background, {position: top});
			//Container
			this.container.setStyle({background: '#1d1d1d url(' + this.macboxImagePath + 'container_bg.png) repeat-x'});
			this.container.setStyle({position: 'absolute', top: 0, left: 0, zIndex: 51, margin: '10px 0', padding: '16px 15px 20px'});			
			this.container.hide();
			$(document.body).insert(this.container, {position: top});
			//Description
			this.description.setStyle({float: 'left', color: '#FFFFFF', padding: '0 0 10px'});
			//Exit Button
			this.exitButton.setStyle({float: 'right', display: 'block', width: '29px', height: '27px', padding: '0 0 10px', background: 'url(' + this.macboxImagePath + 'exit_btn.png) no-repeat', cursor: 'pointer'});
			//Asset Containers
			this.screenshot.hide();
			this.swfContainer.hide();
			//Preloader
			this.preloader.src = this.macboxImagePath + 'macbox_preloader_black.gif';
			this.preloader.setStyle({display: 'block', position: 'absolute', zIndex: 52, 
									left: document.viewport.getWidth()/2-this.preloader.getWidth()/2+'px',
									top: document.viewport.getScrollOffsets().top + document.viewport.getHeight()/2+'px',
									color: '#ffffff', fontWeight: 'bold', fontSize: '16px'}).hide();
			//Insert Elements
			this.infoHolder.insert(this.description, {position: top});			
			this.infoHolder.insert(this.exitButton, {position: top});
			this.container.insert(this.infoHolder, {position: top});
			this.container.insert(this.swfContainer, {position: top});			
			$(document.body).insert(this.preloader, {position: top});
			this.container.insert(this.screenshot, {position: top});
		},		
		
		setupHandlers: function(){
			this.background.observe('click', function(e){
				this.hide();							  
   		    }.bind(this));
			this.container.observe('click', function(e){
				this.hide();													 
			 }.bind(this));
		},
		
		setupAnchors: function(){
			this.macboxLinks.each(function(link){
				link.observe('click', function(e){
					e.stop(); //keeps <a> from redirecting
					this.loadAsset(link.readAttribute('href'), link.readAttribute('title'));
  			    }.bind(this))
  		    }.bind(this))
		},
		
		show: function(){
			this.container.show();
			this.background.show();
		},
		
		hide: function(){
			this.preloader.hide();
			this.container.hide();
			this.background.hide();
			this.screenshot.stopObserving('load');
			this.screenshot.hide();
			this.swfContainer.hide();
		},
		
		//Only takes in images and swf's
		//This method can be used to manually to load assets to the macbox
		loadAsset : function(assetPath, description){
			this.show();			
			if (assetPath.endsWith('.swf')){
				this.loadSwf(assetPath, description);
			}else{
				this.loadImage(assetPath, description);						
			}			
		},
			
		loadImage : function(imagePath, description){
			this.screenshot.show();			
			this.preloader.setStyle({left: document.viewport.getWidth()/2-this.preloader.getWidth()/2+'px',
									top: document.viewport.getScrollOffsets().top + document.viewport.getHeight()/2+'px'});							
			this.preloader.show();
			this.container.hide();			

			this.screenshot.observe('load', function(){
				this.preloader.hide();
				this.container.show();				
				this.infoHolder.setStyle({width: this.screenshot.getWidth()+'px'});								
				this.description.update(description).setStyle({width: this.screenshot.getWidth() - 60 +'px'});
				
				//For IE8
				this.container.setStyle({width: this.screenshot.getWidth()+ 'px'});
				this.container.setStyle({top: document.viewport.getScrollOffsets().top+'px', left: (document.viewport.getWidth()/2 - this.container.getWidth()/2) +'px'});
   		    }.bind(this));
			
			this.screenshot.src = imagePath;
		},
		
		loadSwf : function(swfPath, description){
			var swfWidth = 850;
			var swfHeight = 550;
			this.swfContainer.show();
			
			var flashvars = {};
			var params = {};
			params.scale = "noscale";
			var attributes = {};
			
			//http://code.google.com/p/swfobject/wiki/documentation
			swfobject.embedSWF(swfPath, "macbox_swf_container", swfWidth, swfHeight, "9.0.0", "expressInstall.swf", flashvars, params, attributes);
			this.swfContainer = $('macbox_swf_container');
			this.infoHolder.setStyle({width: swfWidth + 'px'});						
			this.description.update(description).setStyle({width: swfWidth - 60 +'px'});
			this.container.setStyle({width: swfWidth + 'px'});			
			this.container.setStyle({top: document.viewport.getScrollOffsets().top+'px', left: (document.viewport.getWidth()/2 - this.container.getWidth()/2) +'px'});
		}
});