var headerColorChange = {
    TimeDelay : 1600,
    HeaderSelector : "",
    HiddenHeaderSelector : "",
    ImageSelector : "",
    BackgroundStartColor : "#666666",
    BackgroundEndColor : "",
    
    DoColorChange : function() {
        
        if (this.TimeDelay == 0 || this.HeaderSelector.length == 0 || this.HiddenHeaderSelector.length == 0 || this.ImageSelector.length == 0 || this.BackgroundStartColor.length == 0) 
        {
            alert("A header change property has not been initialized");
            return;
        }
        
        //grab the end color from hidden element with same class applied
        var headerEle = $(this.HeaderSelector);
        this.BackgroundEndColor = $(this.HiddenHeaderSelector).addClass(headerEle.attr("class")).css("background-color");                
        
        var me = this;
        var colorFadein = function () { headerEle.colorBlend([{fromColor:me.BackgroundStartColor, toColor:me.BackgroundEndColor, param:"background-color", cycles:1, isFade:false}]); };
        var headerImageSwap = function() { 
            var imgEle = $(me.ImageSelector);
            var imgSrc = imgEle.attr("src");
            imgEle.attr("src", imgSrc.replace(/_off/, ""));
        };
        
        window.setTimeout(colorFadein, this.TimeDelay);
        window.setTimeout(headerImageSwap, this.TimeDelay);
    }        
};

var ImageFadeSwapper = {
    ImageParentsWithDelays: [],
    FadeInSpeed: 1000,
    IsIE6: false,
    _elementsToFadeIn: [],

    Initialize: function() {
        if (this.ImageParentsWithDelays.length > 0) {

            this.IsIE6 = (jQuery.browser.msie && jQuery.browser.version < 7);

            for (var index in this.ImageParentsWithDelays) {
                var imgElement = this.CreateImageToFadeIn($(this.ImageParentsWithDelays[index].Selector));

                if (imgElement == null)
                    alert(this.ImageParentsWithDelays[index].Selector + " Not Found");
                else {
                    if (this.ImageParentsWithDelays[index].IE6LeftAdjustment != null) {
                        if (this.IsIE6)
                            $(imgElement).css("left", this.ImageParentsWithDelays[index].IE6LeftAdjustment);
                    }
                    this.FadeInElement(imgElement, this.ImageParentsWithDelays[index].TimeDelay, this.FadeInSpeed);
                }
            }
        }
    },
    FadeInElement: function(element, timeDelay, fadeInSpeed) {
        window.setTimeout(function() {
            $(element).fadeIn(fadeInSpeed);
        }, timeDelay);
    },

    /* The 3rd parameter here is to get rid of an IE6 bug where the ON image was displaying to the right and not over the OFF image. 
       The fix is to explicitly set the "left" css value for the image which will only be applied for IE6. */
    AddElementToFade: function(selector, timeDelay, ie6LeftAdjustment) {
    var ie6Adjustment = (typeof ie6LeftAdjustment == 'undefined') ? null : ie6LeftAdjustment;
        
        var elementAndTime = { Selector: selector, TimeDelay: timeDelay, IE6LeftAdjustment: ie6Adjustment };
        this.ImageParentsWithDelays.push(elementAndTime);
    },
    CreateImageToFadeIn: function(jqueryEle) {
        if (jqueryEle.length == 0)
            return null;

        //wrap the element in parent div and positioning setup
        jqueryEle.wrap("<div class='offImageContainer'></div>");


        //get image src and replace _off with _on    
        var imgSrcOn = jqueryEle.find("img").attr("src").replace(/off/, "on");
        var imgTitle = jqueryEle.find("img").attr("title");
        var imgAltText = jqueryEle.find("img").attr("alt");
        //create img
        var img = document.createElement("img");
        $(img).attr("src", imgSrcOn).attr("title", imgTitle).attr("alt", imgAltText);

        //get anchor tag
        var aHref = jqueryEle.find("a").attr("href");

        var imgDiv = document.createElement("div");

        //sets anchor tag if found
        if (aHref != null) {
            //create a tag
            var aTag = document.createElement("a");
            $(aTag).attr("href", aHref).append(img);
            //create div and append img

            $(imgDiv).attr("id", jqueryEle.attr("id") + "_on").attr("align", "left")
                 .addClass("onImageContainer")
                 .append(aTag);
        }
        else {
            //create div and append img
            $(imgDiv).attr("id", jqueryEle.attr("id") + "_on").attr("align", "left")
                 .addClass("onImageContainer")
                 .append(img);
        }

        //insert into dom after _off image
        jqueryEle.after(imgDiv);
        //return element to be faded after timeout
        return imgDiv;
    }
    /* resulting html
    <div style="position:relative">
    <div id="strategyContainer">
    <img src="../images/landing/strategy_off.jpg" />
    </div>                   
    <div id="strategyOn" style="position:absolute; z-index:101; top:0; display:none;">
    <img src="../images/landing/strategy_on.jpg" />
    </div>  
    </div>
    */
}; 
    
jQuery.preloadImages = function()
{
  for(var i = 0; i<arguments.length; i++)
  {
    jQuery("<img>").attr("src", arguments[i]);
  }
}

var focusArea = {
    activeFocusAreaId: "",
    ChangeFocusArea: function(div, li) {
        $(".subFocus a").each(function() {
            $("#" + this.id).removeClass("selected");
        });
        $(".subFocus .desc div").each(function() {
            $(this).fadeOut("fast");
        });
        $("#" + div).fadeIn("fast");
        $("#" + li).addClass("selected");
    }
};