//jQuery scripts for visual effects.
//John Hård, Hard Consulting AB 2009

var selectedIndex;

//Starting point for the fading in/fading out effect
//Hooks up the eventhandlers to the "service ball divs"...
$(document).ready(function() {
    $('#service0').click(function() {
        ViewService("url(/images/tmg/ServicePanel_top_blue.png)", 0);
    });
    $('#service1').click(function() {
        ViewService("url(/images/tmg/ServicePanel_top_green.png)", 1);
    });
    $('#service2').click(function() {
        ViewService("url(/images/tmg/ServicePanel_top_pink.png)", 2);
    });

    //...and the same handlers to the transparent divs on the arrows under each ball.
    $('#translink0').click(function() {
        ViewService("url(/images/tmg/ServicePanel_top_blue.png)", 0);
    });
    $('#translink1').click(function() {
        ViewService("url(/images/tmg/ServicePanel_top_green.png)", 1);
    });
    $('#translink2').click(function() {
        ViewService("url(/images/tmg/ServicePanel_top_pink.png)", 2);
    });

    //Sadly, I haven't managed to position the transparent divs in IE6 and IE7 so if the browser is IE
    //and the version is below 8, we just hide the links.
    if ($.browser.msie && parseInt($.browser.version.substr(0, 1)) < 8) {
        $('#translink0').hide();
        $('#translink1').hide();
        $('#translink2').hide();
    }

    //Check if a service should be shown directly on load. This is specified by a querystring.
    //We use the jQuery plug in jqURL to do this.
    if ($.jqURL.get('service') != null) {
        switch ($.jqURL.get('service')) {
            case 'Research.aspx':
                ViewService("url(/images/tmg/ServicePanel_top_blue.png)", 0);
                break;
            case 'Publishing.aspx':
                ViewService("url(/images/tmg/ServicePanel_top_green.png)", 1);
                break;
            case 'Events.aspx':
                ViewService("url(/images/tmg/ServicePanel_top_pink.png)", 2);
                break;
        }
    }
});

//Here is where the work is done. The fadeOut call takes a callback as second parameter
//which changes the background image. 
//When not using a callback, the image was changed half way through the fade effect.
function ViewService(bgImage, index) {
    //change view if the current view is different from the clicked one.
    if (selectedIndex != index) {
        selectedIndex = index;
        $("div#servicepanel").fadeOut("fast", function() {
            $("div#servicepaneltop").css({ backgroundImage: bgImage });
            $("div.servicetextcontainer").css({ backgroundColor: "#E0DBD7" });
            $("div#servicepanelfooter").css({ backgroundImage: "url(/images/tmg/ServicePanel_footer.png)" });
            $("div#servicename").text($("#serviceName" + index).text());
            $("div#servicetext").html($("#serviceText" + index).html());
            $("div#servicelinks").html($("#serviceLinks" + index).html());
        });
        $("div#servicepanel").fadeIn("fast");
    }
}