var selectedTab;
var selectedHeroImage;
var heroLink;

var heroData = {
    tabsPersonal: { img: "images/hero_personal.jpg", link: "personal.aspx" },
    tabsBusiness: { img: "images/hero_business.jpg", link: "business.aspx" },
    tabsEnterprise: { img: "images/hero_enterprise.jpg", link: "enterprise.aspx" },
    tabsWebServices: { img: "images/hero_webservices.jpg", link: "webservices.aspx" },
    tabsAnalytics: { img: "images/hero_analytics.jpg", link: "industryanalytics.aspx" }
};

// ==================================================
// Utility
// ==================================================

function onTabRollover(el) {
    if (selectedTab != null)
        selectedTab.attr('class', '');

    if (heroData[el.id] == undefined)
        return;

    selectedHeroImage = heroData[el.id].img;
    heroLink = heroData[el.id].link;
    selectedTab = $(el);

    selectedTab.attr('class', 'selected');
    changeImage('#hero', selectedHeroImage);
    //$('#hero').parent().get(0).href = heroLink;
}

function onTabRollout(el) {
    changeImage('#hero', selectedHeroImage);
}

// ==================================================
// Main
// ==================================================

$(document).ready(function() {
    selectedTab = $('#tabsPersonal');
    selectedHeroImage = heroData.tabsPersonal.img;
    heroLink = heroData.tabsPersonal.link;

    $(".callout .button").mouseover(function() { changeImage(this, "images/btn_see_all_over.png"); });
    $(".callout .button").mouseout(function() { changeImage(this, "images/btn_see_all.png"); });
    $(".callout .button").mousedown(function() { changeImage(this, "images/btn_see_all_on.png"); });

    $.preloadImages(
        heroData.tabsBusiness.img, heroData.tabsEnterprise.img, heroData.tabsWebServices.img, heroData.tabsAnalytics.img,
        "images/btn_see_all_on.png", "images/btn_see_all_over.png"
    );
});