$(function() {
    init_slider();
});


function init_slider() {
	// thumbs selectors
	var thumbs = $('.slider_thumbs li');
	var thumbs_ul = thumbs.parent();
	var thumbs_width = thumbs.eq(0).outerWidth();
	
	// big slide selectors
	var large_slide = $('.slides_fixed li');
	
	var i=0;
	large_slide.each(function(){
		$(this).attr('_index', i);
		i++;
	});
	
	var large_ul = large_slide.parent();
	var large_width = large_slide.eq(0).outerWidth();
	
	// indexes
	var num_show = 6, active_pos = 0, index = 0, num_slides = large_slide.length;
	
	var active_span = $('<span class="active"></span>').appendTo(thumbs_ul.parent());
	
	// clone the last thumbs and place them on the first place
	var num_to_clone = 1;
	for( var i=0; i<num_to_clone; i++ ){
		//thumbs_ul.prepend(thumbs_ul.find('li:last').remove());
		large_ul.prepend(large_ul.find('li:last').remove());
		index++;
	}
	
	// set width
	thumbs.parent().css('width', thumbs_width * num_slides);
	large_slide.parent().css('width', large_width * num_slides);
	
	// set left
	//thumbs.parent().css('left', -1 * index * thumbs_width);
	large_slide.parent().css('left', -1 * index * large_width);
	
	// append overlays
	var overlay_left = $('<span class="overlay" style="left:0"></span>').appendTo($('.slides_fixed')).css('opacity', 0.75);
	var overlay_right = $('<span class="overlay" style="right:0"></span>').appendTo($('.slides_fixed')).css('opacity', 0.75);
	set_overlay_width();
	$(window).resize(set_overlay_width);
	
	function get_overlay_width(){
		return ($(window).width() - large_width) / 2;
	}
	function set_overlay_width(){
		$('.slides_fixed .overlay').css('width', get_overlay_width());
	}
	
	// buttons events
	$('#slider .next_btn').live('click', function() { next_slide(); return false; });
	$('#slider .prev_btn').live('click', function() { prev_slide(); return false; });
	
	// thumbs click events
	thumbs.live('mouseup', function(){
		var thumbs_index = $(this).parent().find('li').index(this);
		
		
		index = large_slide.parent().find('li').index( large_slide.parent().find('li[_index='+thumbs_index+']') );
		
		
		//console.log(index2);
		var num_invisible = Math.abs(parseInt(thumbs_ul.css('left').replace('px', ''))) / thumbs_width;
		
		active_pos = thumbs_index-num_invisible;
		
		//move_active_span();
		//show_big_slide();
		
		active_pos--;
		index--;
		next_slide();
		
		//console.log(index);
		
		return false;
		
		
	});
	
	// show next slides
	function next_slide(){
		if(active_pos < num_show-1 ) active_pos++;
		else active_pos = 0;
		move_active_span();
		
		if( index == num_slides-2 ){
			
			// clone big slide
			var big_clone = large_ul.find('li:first').remove();
			var new_left = parseInt(large_ul.css('left').replace('px', '')) + large_width;
			large_ul.append(big_clone).css('left', new_left);
			
			index--;
		}
		
		index++;
		show_thumb_slide();
		show_big_slide();
	}
	
	// show previous slides
	function prev_slide(){
		if(active_pos > 0) active_pos --;
		else active_pos = num_show-1;
		
		move_active_span();
		
		if( index == 1 ){
			// clone last thumb and place it on first place
			
			// clone big slide
			var big_clone = large_ul.find('li:last').remove();
			var new_left = parseInt(large_ul.css('left').replace('px', '')) - large_width;
			large_ul.prepend(big_clone).css('left', new_left);
			
			index++;
		}
		
		index--;
		show_thumb_slide();
		show_big_slide();
	}
	
	// move highlight
	function move_active_span(){
		active_span.stop(true, true).animate({'left': active_pos * thumbs_width});
	}
	
	// move thumbnails
	function show_thumb_slide(){
		return;
		
		if(active_pos == num_show-1 )
		thumbs.parent().stop(true, true).animate({'left' : -1 * (index-num_show+1) * thumbs_width});
		
		if(active_pos == 0 )
		thumbs.parent().stop(true, true).animate({'left' : -1 * index * thumbs_width});
	}
	
	// move big slides
	function show_big_slide(){
		large_slide.parent().stop(true, true).animate({ 'left' : -1 * index * large_width });
	}
}