////////////////////////////////////
//                                //
//  Created by Frank Mouthaan     //
//                                //
//  Version 1.0, 2009             //
//  Horseviewer-1.0.js            //
//                                //
//  For a scrolling view of       //
//  horses and other stuff        //
//                                //
////////////////////////////////////

$(document).ready(function() {

  // On which objects do you want to add this function
	horseviewer( $("#horse_viewer"), 6 );
	horseviewer( $("#stable_viewer"), 7 );
  

  // Function HORSEVIEWER v1.0
  // v_id    = ID of the object
  // v_title = Title of the object ( false = no title )
	function horseviewer( v_id, seconds ) {
    
		/* Create HorseViewer v1.0
		v_id.find(".hv_horse_info").wrapAll("<div class='hv_con'><div class='hv_horse'><div class='hv_horse_con'><div class='hv_horse_slide'></div></div></div></div>");
		$("<div class='corn_tl'></div><div class='corn_tr'></div>").prependTo( v_id );
		$("<div class='corn_bl'></div><div class='corn_br'></div>").appendTo( v_id );
		$("<div class='hv_title'></div>").insertBefore( v_id.find(".hv_horse") );
		$("<div class='hv_navigation'></div>").insertAfter( v_id.find(".hv_horse") );
		$("<div class='hv_text'></div>").insertAfter( v_id.find(".hv_navigation") );
		$("<div class='hv_title_gen'></div><div class='hv_title_con'><div class='hv_title_horses'></div></div>").appendTo( v_id.find(".hv_title") );
		$("<span id='hv_nav_move'></span><ul class='hv_numbers_float'></ul>").appendTo( v_id.find(".hv_navigation") );
		$("<div class='hv_more'></div>").appendTo( v_id.find(".hv_navigation") );
    */
	
	
		// Count the number of elements within
		var horses  = v_id.find('.hv_horse_slide').children().length;
		var count   = 1;
		var seconds = seconds * 1000;
	
    
		/* Insert all the contents
		if ( v_title == false ) { v_title = '' } 
		if ( v_subtitle == false ) { v_subtitle = '' } 
    v_id.find(".hv_title_gen").append( v_title );
		v_id.find(".hv_more").append( v_subtitle );
		v_id.find(".hv_horse").find(".hv_horse_info").each(function() {
			var title = $(this).find(".horse_beschrijving").html();
			$("<div class='hv_title_horse'>" + title + "</div>").appendTo( v_id.find(".hv_title_horses") );
			$("<li class='hv_number'>" + count + "</li>").appendTo( v_id.find(".hv_numbers_float") );
			count++;
		});
		*/
	
		// Variables
		var viewer 		= v_id.find('.hv_con');				
		var viewer_h	= viewer.find('.hv_horse_slide');										
		var height_h  = viewer.find('.hv_horse').height();								
		var height_t  = viewer.find('.hv_title').height();									
		var count_h   = viewer.find('.hv_horse').find('.hv_horse_info').size();
		var glob_off  = viewer.offset();
		var x 				= viewer.find('.hv_navigation').find('.hv_number');
		
		
		viewer_h.find('.hv_horse_info').each(function() {
			$(this).height( height_h - 10 );
		});
	
		viewer.find('#hv_nav_move').css({ 
				width: $('.hv_navigation li:first').width()+10, 
				height: $('.hv_navigation li:first').height()+4 
		});
		viewer.find('.hv_navigation li:first').addClass('active');
		
		
		// FUNCTION ANIMATOR
		var animatortje = function(el, number) {
			
			// NUMBER SWITCH
			var offset = viewer.find('.hv_navigation li:eq(' + number + ')').offset();
			viewer.find('#hv_nav_move').animate({ 
					width: $('.hv_navigation li:eq(' + number + ')').width()+10 + 'px', 
					height: $('.hv_navigation li:eq(' + number + ')').height()+4 + 'px',
					left: (offset.left - glob_off.left) + 'px'
			}, 350, 'swing' );
			viewer.find('.active').removeClass('active');
			viewer.find('.hv_navigation li:eq(' + number + ')').addClass('active');
			
			// // // // // // // // // // // // // // //
	
			// TITLE SWITCH
			var css_top_title = height_t * number;
			viewer.find('.hv_title_horses').animate({
				'top' : -css_top_title
			});
			
			// // // // // // // // // // // // // // //
	
			// HORSE SWITCH
			var css_top = height_h * number;
			number++;
			if ( number == horses ) { number = 0 }
			
			viewer.find('.hv_horse_slide').animate({
				'top' : -css_top
			}).animate({
				'opacity' : 1
			}, seconds, "swing", function() {	
				animatortje( viewer.find('.hv_horse_slide'), number );
			});
			
		}
	
	
		// START ANIMATOR
		animatortje( viewer.find('.hv_horse_slide'), 0); 
	
	
		// CLICK ON NUMBER
		viewer.find('.hv_navigation .hv_number').live("click", function(e) {  
		 
			//stop anim
			viewer.find('.hv_horse_slide').stop(true);
		
			//find eq
			var x = $(e.target).html();
			number = x - 1;
			
			//restart anim  
			animatortje( viewer.find('.hv_horse_slide'), number );  
		
		});
	
	
		// HOVER ON INFORMATION
		viewer.find('.hv_horse_slide').live("mouseover", function() {  
		 
			//stop anim
			viewer.find('.hv_horse_slide').stop(true);
		
		});  
	
		// HOVER OFF INFORMATION
		viewer.find('.hv_horse_slide').live("mouseout", function() {  
			
			// Find out where the animator is
			var x = viewer.find('.hv_navigation').find('.active').html();
			number = x - 1;
	
			//restart anim  
			animatortje( viewer.find('.hv_horse_slide'), number );  
		
		});  
	}
	
  
});