/*
 * MooTools
 * version 1.11
 * documentation at http://docs.mootools.net
 * used for floating layer & on dom ready functions
 */

/*
 * Modalizer
 * based on MooTools
 * documentation at http://clientside.cnet.com/cnet.gf/docs/files3/common/js-widgets/modalizer-js.html
 * used for modal floating layer
 */

window.addEvent('domready', function() {
	$$('img.mo').each(function(img) {
	    var src = img.getProperty('src');
	    var extension = src.substring(src.lastIndexOf('.'),src.length)
	    img.addEvent('mouseenter', function() { img.setProperty('src',src.replace(extension,'-o' + extension)); });
	    img.addEvent('mouseleave', function() { img.setProperty('src',src); });
	});
});

var FloatingLayer = new Class({

	/*
	 * @type {Object}
	 */
	options: {
		loadingText: 'Loading content...',
		failureText: 'Failed to get content',
		layerColor: '#000000',
		layerOpacity: .5
	},

	/*
	 * Constructor
	 *
	 * @param {Object} options
	 */
	initialize: function(options) {
		this.setOptions(options);

		this.xposition = getWidth()/2;
		this.yposition = getHeight()/2;
		this.zIndex = '6000';
		this.className = 'floating-layer-wrapper';
		this.popwindow = null;
		this.iframe = null;
		this.hideButton = 'a.close';
		this.maxHeight = 650;
		this.loads = 1;

		// Create base element if it doesn't already exist
		if ($$('div.floating-layer-wrapper').length < 1) {
			this.popwindow = new Element('div', {
    				'styles': {
					'left': this.xposition,
					'top': this.yposition,
					'z-index': this.zIndex
    				},
				'class': this.className
			}).injectInside(document.body).setOpacity(0);
			this.iframe = new Element('iframe');
			//this.popwindow.adopt(this.iframe);
			this.iframe.setProperties({
				'frameborder': '0',
		    	'scrolling': 'auto',
				'name': 'fl' + this.xposition
			});
			this.popwindow.adopt(this.iframe);
		} else {
			this.popwindow = $$('div.floating-layer-wrapper')[0];
			this.iframe = $$('iframe')[0];
		}
	},

	/*
	 * Will show the popup
	 */
	show: function(url, button, maxHeight) {
		this.modalShow({
  			modalStyle:{
    				'background-color': this.options.layerColor,
				'opacity': this.options.layerOpacity
			},
			hideOnClick: true,
			onModalShow: function() {this.getContent(url, button)}.bind(this),
			onModalHide: function() {this.popwindow.setOpacity(0)}.bind(this)
		});
	},

	/*
	 * Will asynchronously get the content for the popup from html file
	 */
	getContent: function(url, button) {
		this.iframe.addEvent('load', this.effect.bindAsEventListener(this, [button]));
		this.iframe.contentWindow.location.href = url;
	},

	/*
	 * Will apply effect to showing of content (only on first load)
	 */
	effect: function(e, button) {

		var effectPopwindow = new Fx.Styles(this.popwindow, {duration: 1000, transition: Fx.Transitions.linear});
		var frameBody = $(this.popwindow.getFirst());

		assignHideButtonFloatingLayer(button);

		if (this.loads == 1) {
			effectPopwindow.start({
				'opacity': [0.2, 1]
			})
		}

		//get the size of the content
		if (this.popwindow.getFirst().contentDocument) { // DOM
			var frameSize = frameBody.contentDocument.body.getFirst().getSize().scrollSize;
			frameSize.y = frameSize.y + 16;
		} else if (this.popwindow.getFirst().contentWindow) { // IE win
			var frameSize = frameBody.contentWindow.document.body.getFirst().getSize().scrollSize;
			frameSize.x = frameSize.x + 16;
			frameSize.y = frameSize.y + 16;
		}

		var newWidth =  frameSize.x;
		var newHeight = frameSize.y;
		
		if (this.maxHeight < frameSize.y) {
			newHeight = this.maxHeight
		}

		//change the size of the floating layer & iframe
		this.popwindow.setStyles({
		    'left': (this.xposition.toInt() - (newWidth / 2)),
			'top': (this.yposition.toInt() - (newHeight / 2)) + window.getScrollTop(),
			'width': newWidth,
			'height': newHeight,
			'border': 'none'
		})

		frameBody.setStyles({
			'width': newWidth,
			'height': newHeight
		})

		this.loads = this.loads + 1;
	},

	/*
	 * Will hide the popup
	 */
	hide: function() {
		this.popwindow.setOpacity(0);
		this.modalHide();
	}
});

FloatingLayer.implement(new Options, new Events);
FloatingLayer.implement(new Modalizer);

/* create a floating layer of modal type */
function createFloatingLayer(showButton, hideButton, contentFile, maximumHeight) {
	/*
	* Clear any existing floating layer
	*/
	myFloatingLayer = null;

	/*
	 * add create new floating layer & show method to click event button
	 */
	$E(showButton).addEvent('click', function(event){myFloatingLayer = new FloatingLayer(); myFloatingLayer.show(contentFile, hideButton); return false;});
}

function assignHideButtonFloatingLayer(hideButton) {
	/*
	 * add hide method to click event close button
	 */
	if ($$('iframe')[0].contentDocument) { // DOM
		var closeButton = $ES(hideButton, $E('iframe').contentDocument.body);
	} else if ($$('iframe')[0].contentWindow) { // IE win
		var closeButton = $ES(hideButton, $E('iframe').contentWindow.document.body);
	}

	for(var i = 0; i < closeButton.length; i++) {
 		closeButton[i].addEvent('click', function(event){myFloatingLayer.hide(); return false;});
	}
}


function closeFloatingLayer()
{
    myFloatingLayer.hide();
    return false;
}

function openFloatingLayer(contentFile, hideButton)
{
 	/*
	 * create new floating layer
	 */
    myFloatingLayer = new FloatingLayer(); myFloatingLayer.show(contentFile, hideButton);
}