//flag: set to 1 when an animation is taking place
var animating = 0;

//index of div that is currently being displayed
var index  = 0;

//array of screenshot divs
var screenshots;

//div that is currently being displayed
var current;

//position initial div and set some parameters
$(document).ready(  function() {
                        $("#screenshot0").animate({left: screenshot_center()},0);
                        $("#arrow_left").animate({left: screenshot_center() - 81},0);
                        $("#arrow_right").animate({left: screenshot_center() + 550},0);
                        screenshots = $(".screenshot");
                        current = $("#screenshot0");

                        $(".screenshot").hover(
                                            function(){ if(animating==0) { $('#' + this['id']).children(":first").fadeIn(450); }}, 
                                            function(){ if(animating==0) { $('#' + this['id']).children(":first").fadeOut(250);}}
                                        );
                    });

//when the window is resized, all divs should be recentered
$(window).resize(   function() { 
                          if(current.width() == 500)  current.animate({left: screenshot_center()},1000); 
                          else                        current.animate({left: page_center()},1000); 

                          $("#arrow_left").animate({left: screenshot_center()-81},1000);
                          $("#arrow_right").animate({left: screenshot_center()+550},1000);
                    }
                );
       

//scroll a screenshot to the left, and scroll the next screenshot in the stack in from the right
function scroll_left() {
    if(animating==0) {
        animating = 1;
        $('.arrows').hide();
        current.animate({opacity: '0', left: -550},1000);
        current = next().animate({opacity: '0', left: right()}, 0).animate({opacity: '1', left: screenshot_center()},1000, function(){ animating = 0 ; $('.arrows').fadeIn(250);});
    }
}

//scroll a screenshot to the right, and scroll the previous screenshot in the stack in from the left
function scroll_right() {
    if(animating==0) {
        animating = 1;
        $('.arrows').hide();
        current.animate({opacity: '0', left: right()},1000);
        current = prev().animate({opacity: '0', left: left()}, 0).animate({opacity: '1', left: screenshot_center()},1000, function(){ animating = 0 ; $('.arrows').fadeIn(250);});
    }
}

//scroll the current displaying item off the page to the left, and scroll the selected item onto the page
function show_page(id) {
    if(animating==0) {
        animating = 1;
        $('.arrows').hide();
        current.animate({opacity: 0, left: -650}, 1000);
        $('#' + id).animate({opacity: 0, left: right()}, 0).animate({ opacity: 1, left: page_center()}, 1000, function() { animating = 0; current = $('#' + id); });
    }
}

//return the position for a centered screenshot
function screenshot_center() { return $('#header').width() / 2 - 250; }

//return the position for a centered screenshot
function page_center() { return $('#header').width() / 2 - 300; }

//return the right position for all divs..
function right() { return  $('#header').width() + 50; }

//return the left position for all divs..
function left() { return -550; }

//return the next screenshot in the stack
function next() {
    (screenshots.length - 1) == index ? index = 0 : index += 1;
    return $('#' + screenshots[index]['id']);
}

//return the previous screenshot in the stack
function prev() {
    index == 0 ? index = (screenshots.length - 1) : index -= 1;
    return $('#' + screenshots[index]['id']);
}