$(document).ready(function() {
	var item_num = 0;
	var num_item = $('#slides img').size();
	var carousel_active = true; //does it go to the next item automatically?
	
	var temp_item = '';
	for( var i = 0; i < num_item ; i++ ) {
		temp_item = '<span>●</span>' + "\r\n";
		if(i == 0) { temp_item = '<span class="selected">●</span>' + "\r\n"; }
		$('#selector').append(temp_item);
	}
	
	$('#left_arrow').click(function() { 
		carousel_active = false;	
		prev_item();
	});	
	
	$('#right_arrow').click(function() { 
		carousel_active = false;
		next_item();
	});
	
	$('#selector span').click(function () {
		if(!$(this).hasClass('selected')) {
			carousel_active = false;
			load_item($(this).index());
		}
	});
	
	//start carousel				
	window.setTimeout(carousel_live, 6000, true);		
	
	function carousel_live() {
		if(carousel_active) {
			if(is_last()) {
				rewind();
			}else{
				next_item();
			}
			window.setTimeout(carousel_live, 6000, true);
		}
		return false;
	}	

	
	/***** helper functions *****/	
	function is_first() { return item_num == 0; }
	function is_last() { return item_num + 1 == num_item; }

	function next_item() { load_item(item_num + 1); }	
	function prev_item() { load_item(item_num - 1); }
	
	function load_item(current_item_num) {		
		if(current_item_num >= 0 && current_item_num < num_item) {
			//which direction?			
			if(current_item_num > item_num) {
				$('#scrolling_area').animate({"margin-left": "-="+ (960 * (current_item_num - item_num) ) +"px"}, 700);
			}else{
				$('#scrolling_area').animate({"margin-left": "+="+ (960 * (item_num - current_item_num) ) +"px"}, 700);
			}
			
			item_num = current_item_num;
			set_selector(current_item_num);
			refresh_arrows();
		}		
	}

	function set_selector(item_num) {
		$('#selector span').removeClass('selected');
		$('#selector span:eq(' + item_num + ')').addClass('selected');
	}
	
	function rewind() {
		$('#scrolling_area img').not(':first').not(':last').hide();
		$('#scrolling_area').css('margin-left', '-960px').animate({"margin-left": "+=960px"}, 700);
		$('#scrolling_area').queue(function() {
			$('#scrolling_area img').show();
			$(this).dequeue();
		});
		item_num = 0;
		set_selector(0);
		refresh_arrows();
	}
		
	function refresh_arrows() {
		if(is_first()) { 
			$('#left_arrow').hide();
			$('#right_arrow').show(); 
		}else if(is_last()) {
			$('#left_arrow').show();
			$('#right_arrow').hide();
		}else{
			$('#left_arrow, #right_arrow').show(); 
		}		
	}


});
