var active;
var innerHeight = 560;
var imageHeight = 360;
var imageMaxHeight = 560;
var scrollContainerHeight = 570;
 
$(window).load(function () {
    $('.customScrollerContainer').css({height: scrollContainerHeight + 'px'}); /* set the initial height */
    Init();
 
    // skin the scrollbar
//  $('.slider').customScroller();
 
    // size the slider
    $(window).resize(function () {
        $('.slider').css('width', $(this).width());
        /*
        var sliderWidth = $('.slider .inner').width();
        var screenWidth = $(window).width();
        var newWidth = screenWidth - sliderWidth;
        $('.customScrollerContainer').css('left', newWidth + 'px');
        */
    });
 
    if (window.location.hash != '') {
        scrollToPos(window.location.hash);
    }
});
 
$(document).ready(function () {
    Init();
 
    $('.slider').customScroller();
    Init();
 
    $('.slider img').click(function () {
        var thisHref = $(this).attr('href');
        if (thisHref != '') {
            $(this).attr('src', thisHref).attr('href', '');
        }
 
        // animate the image
        $('.slider img').css({
            height : imageHeight + 'px',
            padding : '100px 0'
        });
 
        var bposimg = window.location.hash;
        var posimg = "#"+$('.slider img').index(this);
        if (bposimg== posimg) {
            // animate the image
            $('.slider img').css({
                height : imageHeight + 'px',
                padding : '100px 0'
            });
            // change the anchor
            window.location.hash = "";
        } else {
            // animate the image
            $(this).css({
                height : $(this).height() + 200 + 'px',
                padding : '0px'
            });
            // change the anchor
            window.location.hash = $('.slider img').index(this);
        }
    }, function() {
        $('.slider .inner').css('width', getSize());
    });
 
    $('body').click(function (e) {
        if ($(e.target).parents('.slider').length == 0) {
            $('.slider img').css({
                height : imageHeight + 'px',
                padding : '100px 0'
            });
            $('.slider .inner').css('width', getSize());
        }
        $('.slider .inner').css('width', getSize());
        $(window).resize();
    });
 
    $('.slider .inner').css('width', getSize());
    $(window).resize();
 
    $('.slider img').load(function() {
        $('.slider .inner').css('width', getSize());
        $('.slider').setScroller();
    });
});
 
function Init () {
    // size the slider
    $('.slider').css('width', $(window).width());
 
    // set image height limit
    $('.slider img').css('height', imageHeight + 'px');
 
    // set inner size
    $('.slider .inner').css({
        height: innerHeight + 'px',
        width: getSize()
    });
}
 
function getSize () {
    var total = 0;
 
    $('.slider img').each(function () {
        total += $(this).width() + 8;
    });
    $('.slider li:last-child').css('padding-right', '0px');
 
    return total -7;
}
 
var contentWidth;
var screenWidth;
var scrollWidth;
 
function scrollToPos (hashPos) {
    contentWidth = $('.inner').width();
    screenWidth = $(window).width();
    scrollWidth = $('.divOScrollerBarCursor').width();
 
    // alert('contentWidth: ' + contentWidth + '\n' + 'screenWidth: ' + screenWidth + '\n' + 'scrollWidth: ' + scrollWidth + '\n');
 
    hashPos = hashPos.replace('#', '');
    $('.slider img').eq(hashPos).css({
        height : $('.slider img').eq(hashPos).height() + 200 + 'px',
        padding : '0'
    });
 
    // set inner size
    $('.slider .inner').css('width', getSize());
 
    var total = 0;
    $('.slider img').each(function (index) {
        if (index < hashPos) {
            total += $(this).width();
        }
    });
 
    if (total + 100 >= contentWidth) {
        total = contentWidth - screenWidth;
    }
 
    $('.customScrollerContent').css({ left: -total + 'px' });
 
    var v = ((screenWidth - scrollWidth) / $('.slider img').length) * hashPos + 1;
    $('.divOScrollerBarCursor').css({ left: v + 'px' });
}