$(function(){
    
    //Get our elements for faster access and set overlay width
    var div = $('div.footerli'),
        ul = $('ul.footerli'),
        // unordered list's left margin
        ulPadding = 15;

    //Get menu width
    var divWidth = div.width();

    //Remove scrollbars
    div.css({overflow: 'hidden'});

    //Find last image container
    var lastLi = ul.find('li:last-child');

    //When user move mouse over menu
    div.mousemove(function(e){

      //As images are loaded ul width increases,
      //so we recalculate it each time
      var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;

      var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
      div.scrollLeft(left);
    });
    
    $('#systemMessage').hide().slideDown(200).animate({opacity: 0.2}, 200).animate({opacity: 1}, 200);
    $.scrollTo($("#systemMessage"),200,{easing:'easein'});
    $('span.closeSystemMessage a').click(function(){$("#systemMessage").slideUp(100);return false;});
});


function showImage(image, newwindow, dellink){
    $("#galleryimage").attr('src', image);
    $("#newwindow").attr('href', newwindow);
    if(dellink) $("#dellink").attr('href', dellink);
    return false;        
}

function showSystemMessage(message, type) {
    if(!type) type = 'warning';
    var html = '<div id="systemMessage" class="' + type + '"><span class="closeSystemMessage"><a href="#">x</a></span><ol>' + message + '</ol></div>';
    $('#messageBox').html(html);
    $('#systemMessage').hide().slideDown(200).animate({opacity: 0.2}, 200).animate({opacity: 1}, 200); 
    $('span.closeSystemMessage a').click(function(){$("#systemMessage").slideUp(100);return false;});
    $.scrollTo($("#messageBox"),200,{easing:'easein'});
}

function showSystemAlert(message, type)
{
    if(!type) type = 'warning';
    var html = '<div id="systemAlert" class="sa' + type + '"><span class="closeSystemMessage"><a href="#">x</a></span><ol>' + message + '</ol></div>';
    $('#messageBox').html(html);
    $('#systemAlert').hide().slideDown(200).animate({opacity: 0.2}, 200).animate({opacity: 1}, 200).animate({opacity: 1}, 10000).slideUp(100); 
    $('#systemAlert').click(function(){$(this).stop();});
    $('span.closeSystemMessage a').click(function(){$(this).stop();});
}

function slideSwitch()
{
    var $active = $("#slideshow IMG.active");

    if ( $active.length == 0 ) $active = $("#slideshow IMG:last");

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $("#slideshow IMG:first");

    $active.addClass("last-active");

    $next.css({opacity: 0.0})
        .addClass("active")
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass("active last-active");
        });
}

$(function()
{
    setInterval( "slideSwitch()", 4000 );
});