// Globals
var defaultHeight = '600';
var menuOpacity = 0.75;
var defaultMenuTop = '0';
var defaultFooterTop = '2';
var galleryMenuTop = '-100';
var galleryFooterTop = '-52';

var activeItem = null;

// Load home.html into the content div when page is first loaded.
$(function () {
    PreloadImages();
    SetItemActive('weddings');
    $('#menu').fadeTo(0, menuOpacity);
});

var names = new Array(
                        { name: 'weddings', url: './portfolio/weddings/index.html', items: null, height: defaultHeight, isGallery: true },
                        { name: 'portraits', url: 'portfolio/portraits/index.html', items: null, height: defaultHeight, isGallery: true },
                        //{ name: 'nature', url: 'portfolio/nature/index.html', items: null, height: defaultHeight, isGallery: true },
                        //{ name: 'creative', url: 'portfolio/creative/index.html', items: null, height: defaultHeight, isGallery: true },
                        { name: 'other_work', url: 'portfolio/other_work/index.html', items: null, height: defaultHeight, isGallery: true },
                        { name: 'about', url: 'about.html', items: null, height: defaultHeight, isGallery: false },
                        //{ name: 'blog', url: 'http://www.ericdesch.com/blog/', items: null, height: defaultHeight, isGallery: false, target: '_top' },
                        { name: 'rates', url: 'rates.html', items: null, height: defaultHeight, isGallery: false },
                        { name: 'contact', url: 'contact.html', items: null, height: defaultHeight, isGallery: false });

var imageDir = './images/';
var imageExt = '.gif';

var suffixNormal = '';
var suffixActive = '_a';
var suffixHover = '_h';

// Preload the images for the "tab" links.
function PreloadImages() {

    if (document.images) {
        var img = new Image();
        for (var a = 0; a < names.length; a++) {
            img.src = imageDir + names[a].name + suffixActive + imageExt;
            img.src = imageDir + names[a].name + suffixHover + imageExt;
        }
    }
}

function SetTabActive(name) {

    if (!IsTabActive(name)) {
        document.images[name].src = imageDir + name + suffixActive + imageExt;
    }
}

function SetTabHover(name) {

    if (!IsTabActive(name)) {
        document.images[name].src = imageDir + name + suffixHover + imageExt;
    }
}

function SetTabNormal(name) {

    if (!IsTabActive(name)) {
        document.images[name].src = imageDir + name + suffixNormal + imageExt;
    }
}

function IsTabActive(name) {

    if (name == null) {
        return false;
    }

    if (document.images[name].src.indexOf(name + suffixActive + imageExt) > -1) {
        return true;
    }
    else {
        return false;
    }
}

function SetTabExpanded(name, expanded) {

    if (!expanded) {
        document.images[name].src = imageDir + name + suffixNormal + imageExt;
        // clear its div
        innerXHTML(document.getElementById(name + 'Items'), ' ');
    }
    else {
        document.images[name].src = imageDir + name + suffixActive + imageExt;

        // populate Items div
        var itemsXHTML = '';

        for (var i = 0; i < names.length; i++) {
            if (names[i].name == name) {
                for (var c = 0; c < names[i].items.length; c++) {
                    var itemName = names[i].items[c].name;
                    // Spacer
                    if (itemName == null) {
                        itemsXHTML += '<img src="' + imageDir + 'dot.gif' + '" height="1" width="60" style="background-color:#cccccc; margin:7px 6px 6px 0px;" /><br />';
                        //itemsXHTML += '<span class="menuItem" style="color:#ccc; line-height: 8px;">----------</span><br />';
                    }
                    else if (itemName == activeItem) {
                        itemsXHTML += '<div><a href="#" class="menuItemActive" onclick="SetItemActive(\'' + itemName + '\');">' + itemName + '</a></div>';
                    }
                    else {
                        itemsXHTML += '<div><a href="#" class="menuItem" onclick="SetItemActive(\'' + itemName + '\');">' + itemName + '</a></div>';
                    }
                }
            }
        }

        itemsXHTML += '<span class="menuItem" style="line-height: 6px;"></span><br />';

        innerXHTML(document.getElementById(name + 'Items'), itemsXHTML);
    }
}

function ToggleTabExpanded(name) {

    SetTabExpanded(name, !IsTabActive(name));

}

function SetItemActive(name) {

    if (IsItemActive(name)) {
        return;
    }

    activeItem = name;

    var newUrl = '';
    var newHeight = defaultHeight;
    var newMenuTop = defaultMenuTop;
    var newFooterTop = defaultFooterTop;

    for (var i = 0; i < names.length; i++) {
        if (names[i].name == null) {
            // Spacer
            continue;
        }
        if (names[i].name == name) {
            SetTabActive(name);
            newUrl = names[i].url;
            newHeight = names[i].height;
            if (names[i].isGallery) {
                newMenuTop = galleryMenuTop;
                newFooterTop = galleryFooterTop;
            }
            else {
                newMenuTop = defaultMenuTop;
                newFooterTop = defaultFooterTop;
            }
        }
        else {
            // only if it doesn't have subitems
            if (names[i].items == null) {
                // Don't call SetTabNormal here. It is active and SetTabNormal won't change it.
                document.images[names[i].name].src = imageDir + names[i].name + suffixNormal + imageExt;
            }
        }

        if ((IsTabActive(names[i].name)) && (names[i].items != null)) {
            for (var c = 0; c < names[i].items.length; c++) {
                if (names[i].items[c].name == name) {
                    newUrl = names[i].items[c].url;
                    newHeight = names[i].items[c].height;
                    SetTabExpanded(names[i].name, true);
                }
                else {
                    SetTabExpanded(names[i].name, true);
                }
            }
        }
    }

    if (newUrl != '') {

        // set the height of the content div based on the selected menu item.
        var currHeight = $("#content").css('height');
        if (currHeight != newHeight) {
            $("#content").css('height', newHeight);
        }

        // Only animate the menu/footer repositioning if the newMenuTop differs form the current menu.top
        currMenuTop = $('#menu').position().top;
        if (currMenuTop == newMenuTop) {
                $("#content").load(newUrl);
        }
        else {
            //$("#content").fadeOut("fast", function () {
                $("#menu").animate({ "top": newMenuTop }, 1000);
                // Load the content after the menu/footer move. looks smoother.
                $("#footer").animate({ "top": newFooterTop }, 1000, function () {
                    $("#content").load(newUrl, function () {
                        //$("#content").fadeIn(1000);
                    });
                });
            //});
        }

    }
}


function IsItemActive(name) {

    if (name == null) {
        return false;
    }

    // is it top level?
    if (document.images[name] != null) {
        if (document.images[name].src.indexOf(name + suffixActive + imageExt) > -1) {
            return true;
        }
        else {
            return false;
        }
    }
    else {
        // it is a sub item. cycle through and check css style.
        for (var i = 0; i < names.length; i++) {
            if (names[i].items != null) {
                for (var c = 0; c < names[i].items.length; c++) {
                    if (names[i].items[c].name == name) {
                        return document.getElementById('content').className == 'menuItemActive';
                    }
                }
            }
        }

    }
}

function BuildMenus() {
    for (var i = 0; i < names.length; i++) {

            //document.writeln('<div style="width:80px; float:left; padding-top:6px; padding-left: 15px; padding-right: 10px;">');
            document.writeln('<div style="float:left; padding-top:6px; padding-left: 15px; padding-right: 10px;">');

            var str = '';
            str += '<a onmouseover="SetTabHover(names[' + i + '].name);" onmouseout="SetTabNormal(names[' + i + '].name);" onFocus="blur();" ';
            if (names[i].url != null) {
                if (names[i].target != null) {
                    str += 'href="' + names[i].url + '" ';
                    str += 'target="' + names[i].target + '" ';
                    str += 'onclick="window.open(\'' + names[i].url + '\'); return false;"';
                }
                else {
                    str += 'href="#" onclick="SetItemActive(\'' + names[i].name + '\'); return false;" ';
                }
            }
            else if (names[i].items != null) {
                str += 'href="#" onclick="ToggleTabExpanded(names[' + i + '].name); return false;"';
            }
            str += '>';

            document.writeln(str);

            //document.write('<img src="' + imageDir + names[i].name + suffixNormal + imageExt + '" height="13" width="80" name="' + names[i].name + '" alt="' + names[i].name + '" />');
            document.write('<img src="' + imageDir + names[i].name + suffixNormal + imageExt + '" height="13" name="' + names[i].name + '" alt="' + names[i].name + '" />');
            document.writeln('</a>');
            //document.writeln('<div id="' + names[i].name + 'Items"></div>');
            document.writeln('</div>');
        //}
    }
}