/* French 01/02/10*/
var Carousel = {
    speed: 3000,
    item_width: 0,
    left_value: 0,
    main_item_width: 0,
    main_left_value: 0,


    BuildAll: function() {

        Carousel.Initialize()

    },

    Initialize: function() {

        //rotation speed and timer
        var run = setInterval('Carousel.Rotate()', Carousel.speed);
        
        //clone the #main_images UL
        $('#main_images').clone().attr('id', 'slides').appendTo('#carousel');

        // Set the full width of the #main_images UL
        $("#main_images ul").css({ width: ($("#main_images").width() * $("#main_images li").length) + "px" });

        // grab the width and calculate left value
        // Move 1 to left to get center item.
        Carousel.item_width = $('#slides li').outerWidth();
        Carousel.left_value = Carousel.item_width * (-1);
        
        // grab the width and calculate left value
        // Move 2 to left to get center item.
        Carousel.main_item_width = $('#main_images li').outerWidth();
        Carousel.main_left_value = Carousel.main_item_width * (-2);

        //move the last item before first item, just in case user click prev button
        $('#slides li:first').before($('#slides li:last'));

        //set the default item to the correct position 
        $('#slides ul').css({ 'left': Carousel.left_value });
        $('#main_images ul').css({ 'left': Carousel.main_left_value });
        
        // Create the prev/next 
        $buttons_cont = $(document.createElement('div'))
		        .attr('id', 'buttons')
		        .appendTo('#main_images');
		        
		$buttons_prev = $(document.createElement('a'))
		        .attr('id', 'prev')
		        .attr('href', '#')
		        .appendTo('#buttons');
		        
        $buttons_next = $(document.createElement('a'))
		        .attr('id', 'next')
		        .attr('href', '#')
		        .appendTo('#buttons');
        
        
        $title_overlay = $(document.createElement('div'))
		        .attr('class', 'slide_title')
		        .appendTo('#main_images li');
        
        $('#main_images li').each(function() {
            $(this).find('.slide_title').html($(this).find('img').attr('alt'));
        });

        $("#prev").click(this.Prev);
        $("#next").click(this.Next);
        
        $('#slides ul li a').click(this.DirectMove);

        //if mouse hover, pause the auto rotation, otherwise rotate it  
        $('#main_images').hover(
         function() {clearInterval(run);},
         function() {run = setInterval('Carousel.Rotate()', Carousel.speed);}
        );
        
        $('#slides').hover(
         function() {clearInterval(run);},
         function() {run = setInterval('Carousel.Rotate()', Carousel.speed);}
        );

        Carousel.SetDisplayImage();
    },
    
    DirectMove: function(){
        // lets find the position of the one we clicked in the list #slides
        var thumb_index = $('#slides ul li').index($(this).parent());
        var slide_multiplier = thumb_index - 3;
        
        // Check if we should call shuffle_slides() once or twice
        var double_up = false;
        if(slide_multiplier == 2 || slide_multiplier == -2){ double_up = true; };
        
        if(slide_multiplier != 0){
            slide_multiplier = slide_multiplier * -1;
            
            //Find new slides values
            var new_item_width = Carousel.item_width * slide_multiplier;
            var left_indent = parseInt($('#slides ul').css('left')) + new_item_width;
            
            //Find new Main values
            var new_main_width = Carousel.main_item_width * slide_multiplier;
            var main_left_indent = parseInt($('#main_images ul').css('left')) + new_main_width;                
            
            
            function shuffle_slides(item_type){
                // This function checks the direction of the movement (left_indent)
                // the moves the last to the first or vice versa
                
                if(item_type=="slides")
                {
                    if(left_indent < 0){
                        $('#slides li:last').after($('#slides li:first'));
                    }else{
                        $('#slides li:first').before($('#slides li:last'));
                    };
                }else{
                    if(left_indent < 0){
                        $('#main_images li:last').after($('#main_images li:first'));
                    }else{
                        $('#main_images li:first').before($('#main_images li:last'));
                    };
                };
            };
            
            //slide the item            
            $('#slides ul').animate({ 'left': left_indent }, 500, function() {
                shuffle_slides("slides");
                // Check if we should call shuffle_slides() once or twice
                if(double_up){shuffle_slides("slides");};
                //set the default item to correct position
                $('#slides ul').css({ 'left': Carousel.left_value });
                Carousel.SetDisplayImage();
            });
            
            //slide the main            
            $('#main_images ul').animate({ 'left': main_left_indent }, 500, function() {
                shuffle_slides("main");
                // Check if we should call shuffle_slides() once or twice
                if(double_up){shuffle_slides("main");};
                //set the default item to correct position
                $('#main_images ul').css({ 'left': Carousel.main_left_value });
                Carousel.SetDisplayImage();
            });
        };
        //cancel the link behavior
        return false;
    },
    Prev: function() {

        //get the right position            
        var left_indent = parseInt($('#slides ul').css('left')) + Carousel.item_width;
        var main_left_indent = parseInt($('#main_images ul').css('left')) + Carousel.main_item_width;

        //slide the item            
        $('#slides ul').animate({ 'left': left_indent }, 500, function() {
            //move the last item and put it as first item            	
            $('#slides li:first').before($('#slides li:last'));
            //set the default item to correct position
            $('#slides ul').css({ 'left': Carousel.left_value });
            Carousel.SetDisplayImage();
        });
        
        //slide the item            
        $('#main_images ul').animate({ 'left': main_left_indent }, 500, function() {
            //move the last item and put it as first item            	
            $('#main_images li:first').before($('#main_images li:last'));
            //set the default item to correct position
            $('#main_images ul').css({ 'left': Carousel.main_left_value });
            Carousel.SetDisplayImage();
        });

        //cancel the link behavior            
        return false;
    },

    Next: function() {
        // get the right position for the slider
        var left_indent = parseInt($('#slides ul').css('left')) - Carousel.item_width;
        // get the right position for the carousel
        var main_left_indent = parseInt($('#main_images ul').css('left')) - Carousel.main_item_width;
        
        //slide the item
        $('#slides ul').animate({ 'left': left_indent }, 500, function() {
            //move the first item and put it as the last item
            $('#slides li:last').after($('#slides li:first'));
            //set the default item to correct position
            $('#slides ul').css({ 'left': Carousel.left_value });
            Carousel.SetDisplayImage();
        });
        
        //slide the Carousel
        $('#main_images ul').animate({ 'left': main_left_indent }, 500, function() {
            //move the first item and put it as the last item
            $('#main_images li:last').after($('#main_images li:first'));
            //set carousel default item to correct position
            $('#main_images ul').css({ 'left': Carousel.main_left_value });
        });

        //cancel the link behavior   
        return false;
    },

    Rotate: function() {
        $('#next').click();
    },

    SetDisplayImage: function() {
        $('#slides .active').removeClass('active');
        var activeHttp = $('#slides li:eq(3) a').addClass('active');
    }
};

$(document).ready(function() {
    Carousel.BuildAll();
});