// no flash of unstyled content
document.write("<style type='text/css'>.active_user{display:none;}</style>"); 

(function(){
	
	//play nice with other libraries

	var $ = jQuery; 
	
	$(document).ready(function(){
	
	// START TOOLTIPs________________________________________________________________________
		// attach thumb hover
		$("#thumb_gallery").hover(function(){},function(){
			$("#thumb_gallery .tooltip").remove();
		})
		$("#thumb_gallery ol a").hover(function(){ 
		
			// create tooltip div
			$("#thumb_gallery").append('<div class="tooltip"><a href="" class="tt_thumb"><img src=""/></a><h4><a href="#">Image Title</a></h4><p>By: <a href="#"></a></p></div>')
		    
		
		    // initialize tooltip and fade it in
			$(".tooltip")
			.css({
				left: this.parentNode.offsetLeft + "px",
				top: this.parentNode.offsetTop + "px",
				opacity:0
			})
			.fadeTo('fast', .95)
			.hover(function(){ //tooltip hover
		
			},function(){  // when tooltip hover out fade the tooltip out then delete it
					$(".tooltip")
					.fadeOut('fast')
					.remove();
			})
		
			// create closure for active link
			var $this = $(this);
		
			//set link value to string after By in title attr of thumb image
			var linkTxtValue = 	($(this).find("img").attr("title")).split(" By ")[1];

			// if link value is longer than 12 characters truncate and add ellipses
			if(linkTxtValue.length > 12) {
				linkTxtValue = linkTxtValue.substring(0, 11) + "…";
			} 
		
			//set Title value to string before By in title attr of thumb image
			var titleValue = ($(this)
							  .find("img")
							  .attr("title")
							 )
							 .split(" By ")[0];
		
			// if title value is longer than 14 characters truncate and add ellipses
			if(titleValue.length > 14) {
				titleValue = titleValue.substring(0, 13) + "…";
			}
			
			// set tooltip->thumb href to value of active gallery thumb
			$(".tt_thumb")
			.attr("href",$(this)
						.attr("href")
				 );
			
			// set tooltip->thumb src to value of active gallery thumb
			$(".tt_thumb img")
			.attr("src", $(this)
						   .find("img")
					       .attr("src")
				 );
			
			// set tooltip->title href to value of active gallery thumb
			$(".tooltip h4 a")
			.html(titleValue)
			.attr("href",$(this)
				  		 .attr("href")
				 )
			
			// set tooltip->username href to value of string after By in the title		
			$(".tooltip p a")
			.attr("href", "/users/" + ($(this)
			  						  	.find("img")
			  						  	.attr("title")
									  ).split(" By ")[1]
			)
			.text(linkTxtValue)	//set tooltip->username text value to truncated var linkTxtValue
	
		}, function(){
			// hover out function required for jQuery
		})
		// END TOOLTIPs________________________________________________________________________
		// START jFlow init________________________________________________________________________
		
		/*
		// show after unstyled content hide
		$("#jFlowSlides").show();
		
		$("#jFlowController").jFlow({
			slides: "#jFlowSlides",
			width: "312px",
			height: "100px",
			duration: 100
		});
		
		$("#jFlowController li").click(function(){
			$("#jFlowController li").removeClass("selected");
			$(this).addClass("selected");
		})
		*/

		$("#jFlowSlides .active_user").show();
		
		// initiaize slides
		$("#jFlowSlides .active_user").each(function(index){
			if(index != 0) {
				$(this).hide();
			}
		})
		
		$("#jFlowController li").each(function(indexOuter){
			$(this).click(function(){
				
				// set selected state
				$("#jFlowController li").removeClass("selected");
				$(this).addClass("selected");
				
				// hide inactive users and show active user
				$("#jFlowSlides .active_user").each(function(indexInner){
					if(indexInner != indexOuter){
						$(this).hide();
					} else {
						$(this).fadeIn(500);
					}
				})
			})
		})
		
		// END jFlow init________________________________________________________________________
	})

})();