/*
 * 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); });
	});
    
	if (window.getWidth() >= 1200) {
	    ShowBackGround();
	}
});

function ShowBackGround() {
    var item = document.getElementById('WallpaperContainer');
    if (item) {
        item.className = (item.className == 'hidden') ? 'unhidden' : 'hidden';
    }
}

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 + 14;
        } else if (this.popwindow.getFirst().contentWindow) { // IE win
            var frameSize = frameBody.contentWindow.document.body.getFirst().getSize().scrollSize;
            frameSize.x = frameSize.x + 14;
            frameSize.y = frameSize.y + 14;
        }

        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);
}

function DefaultButtonKeyPress(evt, thisElementName) 
{   
    if(evt.which || evt.keyCode)
    {
        if ((evt.which == 13) || (evt.keyCode == 13))
        {
            location = document.getElementById(thisElementName).href;
            return false;
        }
    }
    else
    {
        return true;
    }
}