$(document).ready(function(){

	// tabs on homepage
	
	$('.tab-box').prepend('<div class="tabs"></div>');
	
	$('.tab-box-content').hide();
	
	$('.tab-box h2').remove().appendTo($('.tabs'));
	
	
	
	$('.tab-box h2').each(function(index){
	
		$(this).click(function(){
			
			$('.tab-box-content').hide();
	
			$('.tab-box-content').eq(index).show();
	
			$('.tabs').removeClass('tab-selected-0');
			$('.tabs').removeClass('tab-selected-1');
	
			$class_to_add = 'tab-selected-' + index;
			
			$('.tabs').addClass($class_to_add);
	
		
			return false;
		
		});
	
	});
	
	$('.tab-box h2:first').click();
		

	
	
	
	// carousel ----------------------

    //move the last list item before the first item. The purpose of this is if the user clicks previous he will be able to see the last item.
    $('#home-carousel-list li:first').before($('#home-carousel-list li:last'));
	
	
    $('.button-next').hover(
		function() {
			$(this).css('background-position', '-44px -43px');
		},
		function() {
			$(this).css('background-position', '0 -43px');
		}
	);
	
    $('.button-previous').hover(
		function() {
			$(this).css('background-position', '-44px 0');
		},
		function() {
			$(this).css('background-position', '0 0');
		}
	);





    //when user clicks the image for sliding right
    $('.button-next').click(function(){

        //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
        var item_width = $('#home-carousel-list li').outerWidth();

        //calculate the new left indent of the unordered list
        var left_indent = parseInt($('#home-carousel-list').css('left')) - item_width;

        //make the sliding effect using jquery's anumate function '
        $('#home-carousel-list').animate({left: left_indent}, 500, function(){

            //get the first list item and put it after the last list item (that's how the infinite effects is made) '
            $('#home-carousel-list li:last').after($('#home-carousel-list li:first'));

        	$('#home-carousel-list li:last').hide().fadeIn();

            //and get the left indent to the default -210px
            $('#home-carousel-list').css({'left' : '-525px'});
        });
    });

    //when user clicks the image for sliding left
    $('.button-previous').click(function(){

        var item_width = $('#home-carousel-list li').outerWidth();

    	// when sliding to left we are moving the last item before the first item
    	$('#home-carousel-list li:first').before($('#home-carousel-list li:last'));

    	$('#home-carousel-list').css({'left' : '-1195px'}); // (525 * 2) + 145 [left offset of middle item]

        // same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width)
        var left_indent = parseInt($('#home-carousel-list').css('left'));

    	// and again, when we make that change we are setting the left indent of our unordered list to the default -525px

        $('#home-carousel-list').animate({left: -525}, 500);


    });


	// carousel end ------------------


	// make homepage carousel drivers clickable
	$('ul#home-carousel-list div.clickable').bind('click', function(e){
		href = $(this).children('div').children('p.cta').children('a').attr('href');
		if (href != undefined) {
			window.location = href;
		}
	});



});