// Globals
var prev;                                        // To keep highlighted element
var img_index = 0;                        // To keep active image index
var inp = 0;                                // To denote inprogress
var box_transparancy = 0.9;                 // Floating box transparancy
var fade_speed = 200;                // Fading effect speed


$(document).ready(
function()
{
// Start image preloading
preLoad("#left a");
preLoad("#main a");
preLoad("#right a");

// Set floating boxes transparancy
$('#left').fadeTo("fast",box_transparancy);
$('#main').fadeTo("fast",box_transparancy);
$('#right').fadeTo("fast",box_transparancy);

// Update hover events
setLinks('#left a');
setLinks('#main a');
setLinks('#right a');

// Function to do prefetch
function preLoad(x)
{
        $(x).each(
        function()
        {
                var elem = $(this);
                var src = elem.attr("rel");
                if( src != "")
                {
                        jQuery("<img>").attr("src",src);
                }
        });
}

// Function to assign hover effects
function setLinks(x)
{
        $(x).hover(
        function()
        {
                // Invoke only if this is new link and
                // currently there is no animation running
                if( prev != $(this) && inp == 0)
                {
                        // Cache current element
                        current = $(this);
                        // Set animation inprogress to prevent
                        // further events
                        inp = 1;
                        // remove bold from prev link
                        if(prev)
                                prev.css('font-weight','normal');
                        // Set current links style
                        current.css('font-weight', 'bold');
                        current.css('text-decoration', 'none');
                        // Load new image and start animation
                        loadImage(current.attr('rel'));
                        // Update old element cache
                        prev = current;
                }
    });
}

// Function to load new image and animate the image
function loadImage(newImage)
{
        // Create new image to prevent
        // partially loaded image
        var img = new Image();
        // Update transition on load complete
        $(img).load(
        function ()
        {
                // Hide this image
                $(this).hide();
                // Get image elements
                var i1 = $("#i1");
                var i2 = $("#i2");
                // Toggle between images based on index
                if( img_index == 0 )
                {
                        // i2 is active now
                        // Set new image
                        i1.attr("src",newImage);
                        // Hide this as we are going to change the z order
                        i1.hide();
                        // Swap z order
                        i1.css("z-index", 3);
                        i2.css("z-index", 2);
                        // Show new image
                        i1.fadeIn(fade_speed,
                                function()
                                {
                                        // Set animation complete flag
                                        inp = 0;
                                });
                        img_index = 1;
                }
                else
                {
                        // i1 is active now
                        i2.attr("src",newImage);
                        i2.hide();
                        i2.css("z-index", 3);
                        i1.css("z-index", 2);
                        i2.fadeIn(fade_speed, function() { inp = 0; });
                        img_index = 0;
                }
        })
        // if there was an error loading the image, react accordingly
        .error(
        function ()
        {
                // Set animation complete
                inp = 0;
                alert("image load failed" + newImage);
        })
        // set the image to download
        .attr('src', newImage);
}
});