/* Wait till the pge is fully loaded */
jQuery(document).ready(function(){
    imageCarousel.initialize();
});

/* The object */
var imageCarousel = new Object();

imageCarousel = {
    viewSize : '',
    filmstripSize : '',
    animateDiff : '',
    initialize: function(){
        animateDiff = 116;
        animateBackground = 699;
        imageCarousel.viewSize = $('#filmStrip').parent().width();
        imageCarousel.filmstripSize = $('#filmStrip').width();
        imageCarousel.backgroundSize = $('#backgroundStrip').parent().width();
        imageCarousel.backgroundStripSize = $('#backgroundStrip').width();
        imageCarousel.mouseLeftActive = 0;
        imageCarousel.mouseRightActive = 0;
        imageCarousel.focus = 0;
        imageCarousel.mouseX = 0;
        imageCarousel.mouseY = 0;

        imageCarousel.navigateThumbRightActive = 0;
        imageCarousel.navigateThumbLeftActive = 0;
        imageCarousel.navigateRightActive = 0;
        imageCarousel.navigateLeftActive = 0;

        $('.thumbImage').click(imageCarousel.jumpToBackground);

        $('#layoutContainer').mousemove(function(e){
            imageCarousel.mouseX = e.pageX - this.offsetLeft; //gives you X position
            imageCarousel.mouseY = e.pageY - this.offsetTop; //gives you Y position
            if(imageCarousel.mouseX > 288 && imageCarousel.mouseX < 432 && imageCarousel.mouseY > 558 && imageCarousel.mouseY < 642){
                imageCarousel.mouseLeftActive = 1;
            } else {
                imageCarousel.mouseLeftActive = 0;
            }

             if(imageCarousel.mouseX > 866 && imageCarousel.mouseX < 1000 && imageCarousel.mouseY > 558 && imageCarousel.mouseY < 642){
                imageCarousel.mouseRightActive = 1;
            } else {
                imageCarousel.mouseRightActive = 0;
            }
        });

        $('#filmStrip').mouseenter(imageCarousel.startFocus).mouseleave(imageCarousel.stopFocus);

        $('#leftArrow').click(function(){
            
            if(imageCarousel.navigateLeftActive == 0){
                imageCarousel.navigateLeft();
            }
        });
        $('#rightArrow').click(function(){
            if(imageCarousel.navigateRightActive == 0){
                imageCarousel.navigateRight();
            }
        });

        



    },
    jumpToBackground: function(){
        //alert('koek');
        var moveLeftPx = '-' + (((parseFloat($(this).attr('item')) * 699) - (2 * 699)) +409);
       
        var leftSpace = $('#backgroundStrip').css('left').replace(/[^-\d\.]/g, '');
       
        $('#backgroundStrip').animate({
            left: moveLeftPx
        }, {
            duration: 500, // how fast we are animating
            easing: 'easeOutQuad', // the type of easing
            complete: function() { // the callback


            }
        });
    },

    stopFocus: function(){
       imageCarousel.focus = 0;
    },
    startFocus: function(){
       imageCarousel.focus = 1;
       imageCarousel.calibrateFocus();
    },

    calibrateFocus: function(){
        //alert(imageCarousel.focus);
        if(imageCarousel.focus == 1){
            if(imageCarousel.mouseLeftActive == 1 && imageCarousel.navigateThumbLeftActive == 0){
                imageCarousel.navigateThumbLeft();
            }
            if(imageCarousel.mouseRightActive == 1 && imageCarousel.navigateThumbRightActive == 0){
                imageCarousel.navigateThumbRight();
            }
            setTimeout(imageCarousel.calibrateFocus,150);
        }
    },

    testAlert: function(){
        alert(' X ->' + imageCarousel.mouseX + ' Y ->' + imageCarousel.mouseY);
        if(imageCarousel.mouseActive == 1){
            alert('active');
            //setTimeout(imageCarousel.testLeft,2000);
        } else {
            alert('notActive');
        }

        
    },

    showImage: function(){

        var leftSpace = $('#backgroundStrip').css('left').replace(/[^-\d\.]/g, '');
        var moveLeftPx = 0;
        if((parseFloat(imageCarousel.backgroundStripSize) + parseFloat(leftSpace)) > parseFloat(imageCarousel.backgroundSize)){
            moveLeftPx = '-=' + animateBackground;
        }

        $('#backgroundStrip').animate({
            left: moveLeftPx
        }, {
            duration: 500, // how fast we are animating
            easing: 'easeOutQuad', // the type of easing
            complete: function() { // the callback


            }
        });
    },



    navigateThumbRight: function(){
        imageCarousel.navigateThumbRightActive = 1;
        //var currentItem;
        var leftSpace = $('#filmStrip').css('left').replace(/[^-\d\.]/g, '');
        var moveLeftPx = 0;
        if((parseFloat(imageCarousel.filmstripSize) + parseFloat(leftSpace)) > parseFloat(imageCarousel.viewSize)){
            moveLeftPx = '-=' + animateDiff;
        }


        if(moveLeftPx != 0 && imageCarousel.mouseRightActive == 1 && imageCarousel.focus == 1){

            //currentItem = (Math.abs((parseFloat(leftSpace) / parseFloat(animateDiff)))+1);

           
            $('#filmStrip').animate({
                left: moveLeftPx
            }, {
                duration: 350, // how fast we are animating
                easing: 'easeOutQuad', // the type of easing
                complete: function() { // the callback
                    imageCarousel.navigateThumbRightActive = 0;
                }
            });
        } else {
            imageCarousel.navigateThumbRightActive = 0;
        }

    },
    navigateThumbLeft:function(){

        imageCarousel.navigateThumbLeftActive = 1;
        var leftSpace = $('#filmStrip').css('left').replace(/[^-\d\.]/g, '');
        //alert(imageCarousel.filmstripSize + ' + ' + leftSpace + ' = ' + (parseFloat(imageCarousel.filmstripSize) + parseFloat(leftSpace)) + ' = ' + parseFloat(animateDiff));
        var moveLeftPx = 0;
        if(parseFloat(leftSpace) < 0){
            if(parseFloat(leftSpace) <= '-'+parseFloat(animateDiff)){
                moveLeftPx = '+=' + parseFloat(animateDiff);
            }else{
                moveLeftPx = '0';
            }
        }
        if(moveLeftPx != 0 && imageCarousel.mouseLeftActive == 1 && imageCarousel.focus == 1){
            
            $('#filmStrip').animate({
                left: moveLeftPx
            }, {
                duration: 350, // how fast we are animating
                easing: 'easeOutQuad', // the type of easing
                complete: function() { // the callback
                    imageCarousel.navigateThumbLeftActive = 0;

                }
            });
        } else {
            imageCarousel.navigateThumbLeftActive = 0;
        }

    },
    navigateRight: function(){
        imageCarousel.navigateRightActive = 1;
        var leftSpace = $('#backgroundStrip').css('left').replace(/[^-\d\.]/g, '');
        var moveLeftPx = 0;
        if((parseFloat(imageCarousel.backgroundStripSize) + parseFloat(leftSpace)) > parseFloat(imageCarousel.backgroundSize)){
            moveLeftPx = '-=' + animateBackground;
        }
        if(moveLeftPx != 0){
        $('#backgroundStrip').animate({
            left: moveLeftPx
        }, {
            duration: 500, // how fast we are animating
            easing: 'easeOutQuad', // the type of easing
            complete: function() { // the callback
                imageCarousel.navigateRightActive = 0;

            }
        });
        } else {
            imageCarousel.navigateRightActive = 0;
        }
        
    },
    navigateLeft:function(){
        imageCarousel.navigateLeftActive = 1;
        var leftSpace = $('#backgroundStrip').css('left').replace(/[^-\d\.]/g, '');
        //alert(imageCarousel.filmstripSize + ' + ' + leftSpace + ' = ' + (parseFloat(imageCarousel.filmstripSize) + parseFloat(leftSpace)) + ' = ' + parseFloat(animateDiff));
        var moveLeftPx = (parseFloat(imageCarousel.backgroundSize)-parseFloat(imageCarousel.backgroundStripSize));
        if(parseFloat(leftSpace) < 0){
            if(parseFloat(leftSpace) <= '-'+parseFloat(animateBackground)){
                moveLeftPx = '+=' + parseFloat(animateBackground);
            }else{
                moveLeftPx = '0';
            }
        } 
        if(moveLeftPx != 0){
        $('#backgroundStrip').animate({
            left: moveLeftPx
        }, {
            duration: 500, // how fast we are animating
            easing: 'easeOutQuad', // the type of easing
            complete: function() { // the callback
                imageCarousel.navigateLeftActive = 0;

            }
        });
        } else {
            imageCarousel.navigateLeftActive = 0;
        }
    }
    
}