/**
*	File: viewbox.js
*
*	Author: Matthew Lindley, GForces Web Management: www.gforces.co.uk
*	Purpose: A lightbox-esque class to view images, video and other content
*
*/


var ViewBox = {

	canvasOpacity: 0.85,


	init: function ( options ) {

		this.options 				= options || {};
		this.options.container		= $(this.options.container) || $('container');

		if ( !this.options.container ) {
			alert( 'ViewBox fatal error: container not found' );
		}

		this.loadingImage = new Element( 'img', { src: baseHref + 'images/layup/ajaxLoader.gif', alt: 'Loading' } );

	},


	createViewingArea: function () {

		this.canvas = new Element( 'div' );
		this.stage = new Element( 'div' );

		$$('body')[0].insert({top:this.stage}).insert({top:this.canvas});		//  Insert BEFORE altering because IE doesn't like manipulating not-yet-inserted elements


		//  Canvas: the grey bit
		this.canvas.setStyle({
			'backgroundColor': 'black',
			'height': '100%',
			'left': '0px',
			'position': 'absolute',
			'width': '100%',
			'zIndex': '99999'
		}).setOpacity( this.canvasOpacity ).observe( 'click', function ( ev ) {
			this.switchOff();
		}.bind( this ));

		//  Stage: the box with the content
		this.stage.clonePosition( this.options.container ).setStyle({
			'backgroundColor': 'white',
			'height': '600px',
			'position': 'absolute',
			'width': '810px',
			'zIndex': '9999999'
		});

		this.positionStage();		//  Move to the right place

		//  Add the loading image
		this.stage.insert( this.loadingImage );

		//  Position image
		this.loadingImage.setStyle({
			left: ( ( this.stage.getWidth() - this.loadingImage.getWidth() ) / 2 ) + 'px',
			position: 'absolute',
			top: '50%'
		});

	},


	positionStage: function () {

		this.stage.setStyle({
			'left': ( this.options.container.viewportOffset()[0] + ( ( this.options.container.getWidth() - 800 ) / 2 ) ) + 'px',
			'top': ( ( document.viewport.getHeight() - this.stage.getHeight() ) / 2 ) + 'px'
		});

	},


	switchOff: function () {

		//  We're removing (deleting) both elements because:
			//  1) IE6 is crap
			//  2) Save memory
			//  3) IE6 is crap
		this.canvas.remove();
	   	this.stage.remove();

		Event.stopObserving( window );		//  Allow scrolling again

	},


	switchOn: function ( options ) {

		options = options || {};

		this.windowScroll();		//  Go to top
		this.createViewingArea();	//  Do the grey bit and the white box

		Event.observe( window, 'scroll', this.windowScroll.bind( this ) );		//  Watch for the window scrolling
		Event.observe( window, 'resize', this.positionStage.bind( this ) );		//  Watch for the window resizing


		new Ajax.Updater( this.stage, baseHref + 'ajax.php', {
			parameters: 'type=getViewBoxTemplate',
			asynchronous: false,					//  Make the following code wait until the loading of the layout is done
			onComplete: function ( r ) {

				$$('div.viewBoxClose a').invoke( 'observe', 'click', function ( ev ) {
					Event.stop( ev );
					this.switchOff();
				}.bind( this ));

			}.bind( this )
		});


		if ( typeof options.onSwitchOn == 'function' ) {
			options.onSwitchOn();
		}


	},


	windowScroll: function ( ev ) {
		window.scrollTo( 0, 0 );
	}


}