// SLIDING FUNCTIONS

$(function() {
    var target = $('#slider').get(0); //the scrolled div

    /**
    * restart the scroll position to ( 0, 0 ) (Firefox doesn't reset it)
    * could use $(target).scrollTo( 0, {axis:'xy'));
    * but this needs to be quick(synchronous), to reset before $.localScroll.hash() begins
    */
    target.scrollLeft = target.scrollTop = 0;

    //scroll initially if there's a hash (#something) in the url 
    $.localScroll.hash({
        target: target, //could be a selector or a jQuery object too.
        axis: 'xy', //the default is 'y'
        queue: true,
        duration: 1500
    });

    var $last = $([]); //save the last link

    /**
    * NOTE: In the former version of the demo, I called $('#navigation').localScroll()
    * Now I want to also affect the >> and << links, so I'll use $.localScroll() instead
    */
    $.localScroll({
        target: target, //could be a selector or a jQuery object too.
        axis: 'xy', //the default is 'y'
        queue: true,
        duration: 1200,
        hash: false,
        onBefore: function(e, anchor, $target) {//'this' is the clicked link
            this.blur(); //remove the awful outline

        }
    });



    //by default, the scroll is only done vertically ('y'), change it to both.
    $.scrollTo.defaults.axis = 'xy';
    //this one is important, many browsers don't reset scroll on refreshes
    $('div#overlay').scrollTo(0); //reset all scrollable panes to (0,0)
    $.scrollTo(0); //reset the screen to (0,0)
    var $paneTarget = $('#overlay');

    $('#content_img01').click(function() {
        $paneTarget.stop().scrollTo('0', 1000, {
    });
});


$('#content_img02').click(function() {
    $paneTarget.stop().scrollTo('378px', 1000, {
});
});

$('#content_img03').click(function() {
    $paneTarget.stop().scrollTo('756px', 1000, {
});
});

$('#content_img04').click(function() {
    $paneTarget.stop().scrollTo('1134px', 1000, {
});
});

$('#content_img05').click(function() {
    $paneTarget.stop().scrollTo('1512px', 1000, {
});
});
// PNG hack
$(document).pngFix();
var autoTime;
var currentPicture = 0;
var cancel = false;
function autoScroll(picture) {
    var $paneTarget = $('#overlay');
    var $gallery = $('#slider');
    if (picture == 0) {
        $('#content_img01').trigger('click');
        picture++;
        return;
    }
    if (picture == 1) {
        $('#content_img02').trigger('click');
        picture++;
        return;
    }
    if (picture == 2) {
        $('#content_img03').trigger('click');
        picture++;
        return;
    }
    if (picture == 3) {
        $('#content_img04').trigger('click');
        picture++;
        return;
    }

    if (picture == 4) {
        $('#content_img05').trigger('click');
        picture++;
        return;
    }
}
var photoTimeOut = function() {
    autoScroll(currentPicture);
    currentPicture++;
    if (currentPicture > 4)
        currentPicture = 0;
    autoTime = setTimeout(photoTimeOut, 5000);

}
function stopRolling() {
    clearTimeout(autoTime);

}
function delayStartRolling() {
    autoTime = setTimeout(photoTimeOut, 2000);
}
autoTime = setTimeout(photoTimeOut, 5000);

$('#overlay').hover(stopRolling, delayStartRolling);
$('#gallery img').hover(stopRolling, photoTimeOut);
$('a[id^=content_img]').hover(stopRolling, delayStartRolling);
});