﻿// JavaScript Document

/**
*	Mainframe parameters
**/
window.mainframe = {
    imagesArray: null,

    backgroundImg: null,

    resizeInt: null,

    isHome: false,

    isShown: true,

    imgObj: new Image(),

    showTextBox: true,

    firstLoad: false,

    /**	function innerWidth
    * returns the innerWidth of the window, crossbrowser
    **/
    innerWidth: function () {
        if (window.innerWidth) {

            return window.innerWidth;
        }
        else if (document.documentElement.clientWidth) {
            return document.documentElement.clientWidth;
        }
    },

    /**	function innerHeight
    * returns the clientHeight of the window, crossbrowser
    **/
    innerHeight: function () {
        if (window.innerHeight) {
            return window.innerHeight;
        }
        else if (document.documentElement.clientHeight) {
            return document.documentElement.clientHeight;
        }
    },


    /** function isSafari
    * returns true or false
    **/
    isSafari: function () {
        return (navigator.userAgent.toLowerCase().indexOf("safari") != -1);
    },

    /** function isIE6
    * returns true or false
    **/
    isIE6: function () {
        return (navigator.userAgent.toLowerCase().indexOf("msie 6") != -1);
    },

    /** function isIE
    * returns true or false
    **/
    isIE: function () {
        return (navigator.userAgent.toLowerCase().indexOf("msie") != -1);
    },

    getCookie: function (cookiename) {
        var cookiestring = "" + document.cookie;
        var index1 = cookiestring.indexOf(escape(cookiename));
        if (index1 == -1 || cookiename == "") return "";
        var index2 = cookiestring.indexOf(';', index1);
        if (index2 == -1) index2 = cookiestring.length;
        return cookiestring.substring(index1 + cookiename.length + 1, index2);
    },

    setCookie: function (name, value, expires, path, domain, secure) {
        document.cookie = name + "=" + escape(value) +
		((expires) ? "; expires=" + expires.toGMTString() : "") +
		((path) ? "; path=" + path : "") +
		((domain) ? "; domain=" + domain : "") +
		((secure) ? "; secure" : "");
    },

    resizeBackground: function () {
        w = mainframe.innerWidth();
        h = mainframe.innerHeight();

        var image_scale = mainframe.imgObj.width / mainframe.imgObj.height;
        var window_scale = w / h;

        if (image_scale > window_scale) {
            var wid = Math.floor(h * image_scale);

            $('#background_image').attr('width', wid);
            $('#background_image').attr('height', h);
        }
        else {
            var hei = Math.floor(w / image_scale);

            $('#background_image').attr('width', w);
            $('#background_image').attr('height', hei);
        }
    },


    doOnResize: function () {
        //create a little delay to "unstress" IE and Opera during resizing
        try {
            window.clearTimeout(this.resizeInt);
            this.resizeInt = null;
        }
        catch (err) {
            //nice catch
        }
        this.resizeInt = window.setTimeout("mainframe.resizeBackground()", 20);

    },

    hideMenu: function (callbackfunc) {
        $('#menu_control').unbind('click', mainframe.hideMenu);

        $('#menu_control').addClass('show_menu');
        $('#hide_label').hide();
        $('#show_label').show();

        $('#logo_maher').css('visibility', 'hidden');
        $('#home_menu').slideUp();
        $('#home_content').slideUp(function () {
            $('#home_innercontainer').animate({ width: '140px', left: 0, marginLeft: 0 }, function () {
                $('#menu_control').bind('click', mainframe.showMenu);
                $('#menu_control').show();
                mainframe.isShown = false;
                if (typeof callbackfunc == 'function') { callbackfunc(); }
            });
        });
    },

    showMenu: function () {
        $('#menu_control').unbind('click', mainframe.showMenu);
        $('#menu_control').removeClass('show_menu');
        if (!mainframe.showTextBox) {
            $('#menu_control').hide();
        }

        $('#hide_label').show();
        $('#show_label').hide();

        $('#home_innercontainer').animate({ width: '990px', left: '50%', marginLeft: '-495px' }, function () {

            $('#logo_maher').css('visibility', 'visible');
            $('#home_menu').slideDown();
            $('#home_content').slideDown();
            $('#menu_control').bind('click', mainframe.hideMenu);
            mainframe.isShown = true;
        });
    },

    setImageObj: function (newImg, callback) {

        this.imgObj.src = newImg;
        this.imgObj.onload = callback;
        this.imgObj.onerror = function () { };
    },

    init: function (firstload) {



        mainframe.firstLoad = firstload;

        //get an random image from the array
        if ((mainframe.getCookie('bgimage') != "") && (mainframe.getCookie('bgindex') != "") && (mainframe.getCookie('flag') != "")) {

            //init from cookies
            var index = parseInt(mainframe.getCookie('bgindex'));
            this.backgroundImg = this.imagesArray[index].src;
            slideshow.currentImage = index;
        } else {

            //init from randomize
            var randomIndex = Math.floor(Math.random() * this.imagesArray.length);
            if (this.imagesArray.length > 0) {
                var randomImage = this.imagesArray[randomIndex].src;
                mainframe.setCookie('bgimage', randomImage);
                mainframe.setCookie('bgindex', randomIndex);
                mainframe.setCookie('flag', 1);
                this.backgroundImg = randomImage;
                slideshow.currentImage = randomIndex;
            } else {
                // If no images are set the site does not initialize
                // Added this to initialize the site without background images
                window.setTimeout("mainframe.doOnFirstLoad()", 300);
            }
        }
        //bind menu controls
        $('#show_label').hide();
        $('#menu_control').bind('click', mainframe.hideMenu);
        $(window).resize(function () {
            mainframe.doOnResize();
        });

        //$('#home_menu').hide();


        $('#home_content').hide();
        $('.home_innercontainer').css('width', '184px');
        $('#menu_control').hide();
        $('#logo_maher').css('visibility', 'hidden');
        $('#home_innercontainer').css('top', mainframe.innerHeight() + 'px');
        $('#home_maincontainer').show();

        //ie image caching bug
        if (mainframe.isIE()) {
            mainframe.setImageObj(this.backgroundImg, null);
            window.setTimeout("mainframe.doOnFirstLoad()", 300);
        }
        else {
            mainframe.setImageObj(this.backgroundImg, mainframe.doOnFirstLoad);
        }
        //$('#background_image').attr('src', this.backgroundImg).load(mainframe.doOnFirstLoad);


        if (this.isHome) {
            slideshow.init();
        }
        // If a link gets selected, call blur
        $('a').bind('focus', function () {
            this.blur();
        });

    },

    doOnFirstLoad: function () {


        mainframe.resizeBackground();

        $('#background_image').attr('src', mainframe.backgroundImg);

        $('#loading').hide();

        $('#background_image').show();

        // If the page loads first animate, else just position
        if (mainframe.firstLoad) {
            $('#home_innercontainer').animate({
                'top': '15px'
            }, 2000, 'swing', function () {
                $('#home_slider').show();
                $('#home_content').show();
                $('.home_innercontainer').css('width', '990px');
                if (!mainframe.showTextBox) {
                    $('#menu_control').hide();
                } else {
                    $('#menu_control').show();
                }
                $('#logo_maher').css('visibility', 'visible');
            });
        } else {

            $('#home_innercontainer').css('width', '990px');
            $('#home_slider').show();
            $('#home_content').show();
            $('#home_menu').show();
            $('.home_innercontainer').css('width', '990px');
            if (!mainframe.showTextBox) {
                $('#menu_control').hide();
            } else {
                $('#menu_control').show();
            }
            $('#logo_maher').css('visibility', 'visible');
        }

    }
}

window.slideshow = {
    imagesArray: null,

    currentImage: 0,

    total: 0,

    imageJqueryObj: null,

    overlayJqueryObj: null,

    init: function () {
        //slideshow logic
        this.total = this.imagesArray.length;

        //hover handling
        slideshow.addHover('arrow_slide_prev');
        slideshow.addHover('arrow_slide_next');

        //click handlind
        $('#arrow_slide_prev').bind('click', slideshow.previousImage);
        $('#arrow_slide_next').bind('click', slideshow.nextImage);

        this.imageJqueryObj = $('#background_image');
        this.overlayJqueryObj = $('#background_overlay');

        var bulletContainer = $('#home_slider_bullets');

        for (var i = 0; i < this.total; i++) {
            bulletContainer.append('<span id="slide_' + i + '" onclick="slideshow.openImage(' + i + ');" class="bullet">&nbsp;</span>');
        }

        $('#slide_' + this.currentImage).addClass('selected_bullet');
        slideshow.updateInfoBar();
    },

    updateInfoBar: function () {
        var imageInfos = this.imagesArray[this.currentImage];
        if (imageInfos != undefined) {
            if (imageInfos.text != '') {
                $('#project_title').html(imageInfos.text);

                $('#project_title').show();
            }
            else {
                $('#project_title').hide();
            }
        } else {
            $('#project_title').hide();
        }

    },

    switchImage: function (direction, callback) {


        $('#slide_' + this.currentImage).removeClass('selected_bullet');

        this.currentImage += parseInt(direction);

        if (this.currentImage == this.total) this.currentImage = 0;
        if (this.currentImage == -1) this.currentImage = this.total - 1;

        slideshow.openCurrentImage(callback);
        //});
    },

    openImage: function (index) {
        if (mainframe.isShown) {
            mainframe.hideMenu(function () { slideshow.openImage(index); });
            return;
        }

        $('#slide_' + this.currentImage).removeClass('selected_bullet');
        this.currentImage = index;
        slideshow.openCurrentImage();
        mainframe.setCookie('bgimage', slideshow.imagesArray[slideshow.currentImage].src);
        mainframe.setCookie('bgindex', slideshow.currentImage);
    },

    openCurrentImage: function (callback) {

        $('#slide_' + this.currentImage).addClass('selected_bullet');
        slideshow.updateInfoBar();

        //this.overlayJqueryObj.fadeIn('fast',function(){

        this.overlayJqueryObj.show();
        slideshow.imageJqueryObj.hide();
        $('#loading').show();
        slideshow.imageJqueryObj.removeAttr('src');

        var imgSrc = slideshow.imagesArray[slideshow.currentImage].src;

        //ie doesn't execute the callback function if the image has already been cached
        if (mainframe.isIE()) {
            mainframe.setImageObj(imgSrc, null);

            mainframe.resizeBackground();
            slideshow.imgHasLoaded(imgSrc);

            if (typeof callback == 'function') callback();

        }
        else {

            mainframe.setImageObj(imgSrc, function () {
                mainframe.resizeBackground();
                slideshow.imgHasLoaded(imgSrc);
                if (typeof callback == 'function') callback();
            });
        }
    },


    imgHasLoaded: function (imgSrc) {



        slideshow.imageJqueryObj.attr('src', imgSrc);

        $('#loading').hide(); //('fast',function(){
        slideshow.imageJqueryObj.show();
        slideshow.overlayJqueryObj.hide();
    },

    nextImage: function () {

        if (mainframe.isShown) {
            mainframe.hideMenu(slideshow.nextImage);
            return;
        }

        $('#arrow_slide_next').unbind('click', slideshow.nextImage);
        slideshow.switchImage(1, function () {
            $('#arrow_slide_next').bind('click', slideshow.nextImage);
        });
        mainframe.setCookie('bgimage', slideshow.imagesArray[slideshow.currentImage].src);
        mainframe.setCookie('bgindex', slideshow.currentImage);
    },

    previousImage: function () {

        if (mainframe.isShown) {
            mainframe.hideMenu(slideshow.previousImage);
            return;
        }

        $('#arrow_slide_prev').unbind('click', slideshow.previousImage);
        slideshow.switchImage(-1, function () {
            $('#arrow_slide_prev').bind('click', slideshow.previousImage);
        });
        mainframe.setCookie('bgimage', slideshow.imagesArray[slideshow.currentImage].src);
        mainframe.setCookie('bgindex', slideshow.currentImage);

    },

    addHover: function (id) {
        var elementId = id;

        $('#' + elementId).hover(
			function () {
			    $(this).children('img').attr('src', 'images/' + elementId + '_roll.png');
			},

			function () {
			    $(this).children('img').attr('src', 'images/' + elementId + '.png');
			}
		);
    }
}

//
//getPageSize()
//Returns array with page width, height and window width, height
//Core code from - quirksmode.org
//Edit for Firefox by pHaez
//
var ie = document.all && document.getElementById;

function getPageSize() {
    var xScroll, yScroll;
    if (window.innerHeight && window.scrollMaxY) {
        xScroll = document.body.scrollWidth;
        yScroll = window.innerHeight + window.scrollMaxY;
    } else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
        xScroll = document.body.scrollWidth;
        yScroll = document.body.scrollHeight;
    } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
        xScroll = document.body.offsetWidth;
        yScroll = document.body.offsetHeight;
    }
    var windowWidth, windowHeight;
    if (self.innerHeight) {	// all except Explorer
        windowWidth = self.innerWidth;
        windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
        windowWidth = document.documentElement.clientWidth;
        windowHeight = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
        windowWidth = document.body.clientWidth;
        windowHeight = document.body.clientHeight;
    }
    // for small pages with total height less then height of the viewport
    if (yScroll < windowHeight) {
        pageHeight = windowHeight;
    } else {
        pageHeight = yScroll;
    }
    // for small pages with total width less then width of the viewport
    if (xScroll < windowWidth) {
        pageWidth = windowWidth;
    } else {
        pageWidth = xScroll;
    }
    arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight)
    return arrayPageSize;
}

//Determine if a reference is defined
function defined(o) {
    return (typeof (o) != "undefined");
};

function cssHypen2Camel(property) {
    if (!defined(property) || property == null) { return null; }
    if (property.indexOf("-") < 0) { return property; }
    var str = "";
    var c = null;
    var l = property.length;
    for (var i = 0; i < l; i++) {
        c = property.charAt(i);
        str += (c != "-") ? c : property.charAt(++i).toUpperCase();
    }
    return str;
}

function cssGet(o, property) {
    if (o == null) { return null; }
    var val = null;
    var camelProperty = cssHypen2Camel(property);
    // Handle "float" property as a special case
    if (property == "float") {
        val = cssGet(o, "cssFloat");
        if (val == null) {
            val = cssGet(o, "styleFloat");
        }
    }
    else if (o.currentStyle && defined(o.currentStyle[camelProperty])) {
        val = o.currentStyle[camelProperty];
    }
    else if (window.getComputedStyle) {
        val = window.getComputedStyle(o, null).getPropertyValue(property);
    }
    else if (o.style && defined(o.style[camelProperty])) {
        val = o.style[camelProperty];
    }
    // For color values, make the value consistent across browsers
    // Convert rgb() colors back to hex for consistency
    if (/^\s*rgb\s*\(/.test(val)) {
        val = css.rgb2hex(val);
    }
    // Lowercase all #hex values
    if (/^#/.test(val)) {
        val = val.toLowerCase();
    }
    return val;
};

function getHeight() {
    var body = document.body;
    if (body == null) {
        var bodies = document.getElementsByTagName("BODY");
        if (bodies != null && bodies.length > 0) {
            body = bodies[0];
        }
    }
    var innerHeight = (defined(self.innerHeight) && !isNaN(self.innerHeight)) ? self.innerHeight : 0;
    if (document.documentElement && (!document.compatMode || document.compatMode == "CSS1Compat")) {
        var topMargin = parseInt(cssGet(body, 'marginTop'), 10) || 0;
        var bottomMargin = parseInt(cssGet(body, 'marginBottom'), 10) || 0;
        var alt = (!defined(self.innerHeight) || isNaN(self.innerHeight)) ? 0 : self.innerHeight;
        return Math.max(body.offsetHeight + topMargin + bottomMargin, document.documentElement.clientHeight, document.documentElement.scrollHeight, alt);
    }
    var alt = (!defined(self.innerHeight) || isNaN(self.innerHeight)) ? 0 : self.innerHeight;
    return Math.max(body.scrollHeight, body.clientHeight, alt);
}

function doResize() {
    var pageSize = new Array();
    pageSize = getPageSize();
    var height = (getHeight() - 60) + 'px';
    if (navigator.userAgent.toLowerCase().indexOf("msie") != -1) {
        document.getElementById('content').style.height = height;
    } else {
        var element = document.getElementById('content');
        if (element != null)
            element.style.height = (pageSize[1] - 60) + 'px';
    }
}
