/*
 * Setting
 */
var mainCarrouselDuration = 700;    //Main Carrousel Duration
var mainCarrouselInterval = 5000;   //Main Carrousel Interval


/*
 * Main Execute
 */
$(document).ready(function() {


    //Main Carrousel
    var mainMove = 963;
    /*
    var mainMove = 932;
    */
    var mainPanels = $('div#showcase div.visual div.visualinner > div').size();
    var currentMainPage = 0;
    var mainPages = mainPanels - 1;
    var mainFirstScrollLeft;
    var animated = false;
    

    var mainInterval;
    function setMainInterval() {
        clearInterval(mainInterval);
        mainInterval = setInterval(function(){
           goToMainPage(parseInt(currentMainPage) + 1);
        }, mainCarrouselInterval);
    }

    function thumbnailActiveChange(page) {
   	
        var thumbnailEventHandler = function() {
            goToMainPage($(this).attr('id').slice(-1));
        };

        $('div#showcase div.thumbnail').find('img').each(function(){
            if (page == $(this).attr('id').slice(-1) && $(this).attr('src').indexOf("_active") == -1) {
                $(this).attr('src', $(this).attr('src').replace(/^(.+)(\.[a-z]+)$/, '$1_active$2'));
                $(this).unbind('click').css({cursor: 'auto'});
            } else {
                $(this).attr('src', $(this).attr('src').replace(/^(.+)_active(\.[a-z]+)$/, '$1$2'));
                $(this).unbind('click').bind('click', thumbnailEventHandler).css({cursor: 'pointer'});;
            }
        });
    }

    function goToMainPage(page){
        var moved;
        if (page > mainPages) {
            page = 0;
            moved = (mainPanels - 1) * mainMove;
        } else if (page < 0) {
            page = mainPages;
            moved = (mainPanels - 1) * mainMove;
        } else {
            moved = mainMove;
        }

        moved = Math.abs((currentMainPage - page) * mainMove);
        var arrival;
        /*
        if (page > currentMainPage) {
            arrival = $('div#showcase div.visual').scrollLeft() + moved;
        } else {
            arrival = $('div#showcase div.visual').scrollLeft() - moved;
        }
        */
        arrival = mainMove * page;
        if (!animated) {
            clearInterval(mainInterval);
            thumbnailActiveChange(page);
        }

        animated = true;
        $('div#showcase div.visual').filter(':not(:animated)').animate({
            scrollLeft: arrival
        }, {
            queue:false,
            duration:mainCarrouselDuration,
            easing:'easeOutQuart',
            complete: function() {
                currentMainPage = page;
                setMainInterval();
                animated = false;
            }
        });

        return false;
    }

    $('div#showcase div.visual div.visualinner').css('width', mainPanels * mainMove + 'px');
    $('div#showcase div.lefbtn a').click(function(){
        return goToMainPage(currentMainPage - 1);
    });
    $('div#showcase div.rigbtn a, div#showcase div.nextbtn img').click(function(){
        return goToMainPage(currentMainPage + 1);
    });

    if (navigator.userAgent.match(/iPad/i)) {
        $('div#showcase div.visual div.visualinner').css('height', '423px');
        $('div#showcase div.visual div.visualinner div.mbnr').css({'width': '963px', 'height': '423px'});
        $('div#showcase div.visual').flickable({
            section: 'div.mbnr',
            friction: 0.2,
            elasticConstant: 0.8,
            dragStart: function(event) {
                clearInterval(mainInterval);
                animated = true;
            },
            change: function(event, ui) {
                currentMainPage = Math.floor((parseInt($('div#showcase div.visual').scrollLeft()) - mainFirstScrollLeft) / mainMove);
                console.log($('div#showcase div.visual').scrollLeft() + '||' + currentMainPage);
                thumbnailActiveChange(currentMainPage);
                setMainInterval();
                animated = false;
            }
        });
        mainFirstScrollLeft = parseInt($('div#showcase div.visual').scrollLeft()) - 1;
    } else {
        thumbnailActiveChange(currentMainPage);
        setMainInterval();
    }




});