var animalThumbWidthOffset = 150;
var animalThumbHeightOffset = 150;

var animalColsPerPage = 4;
var animalPicturesTotal = 0;
var animalColsTotal = 0;
var animalCurrentCol = 0;


$(document).ready(function() {

	var isValid = false;
	$("#block-views-Animals-block_2:first").each(function(){
		isValid = true;
	});
	if (isValid){
		
		var viewRows = $("#block-views-Animals-block_2 .views-row")
			
		count = 0;
		var selectorHtml = "";
		var alt = "odd";
		viewRows.each(function(){
		    animalPicturesTotal ++;
		    count ++;
		    $(this).addClass("views-row-" + count);
		    
		    var classes = "thumb selector-item ";
		    classes += " selector-"+count + " ";
		    classes += " "+alt+" ";
		
		    if(alt == "odd"){
		    	alt = "even";
		    } else {
		    	alt = "odd";
		    }
		    
		    if(count == 1){ classes += " selector-item-first ";}
		    if(count == viewRows.length){ classes += " selector-item-last ";}
		    
		    selectorHtml += "<div class=\""+classes+"\" >" + $(this).find(".views-field-nothing .field-content").html() +"</div>";
		}); 
		
		// add selector
		selectorHtml = "<div class=\"animal-pictures-box\"><div class=\"thumb-container\"><div class=\"thumb-slider\"> " + selectorHtml + "</div></div> <div class=\"selector-nav-left\"></div><div class=\"selector-nav-right\"></div></div>";
		
		$(".panel-1").prepend(selectorHtml);
		
		// sort thumbs
		var col = 0;
		alt = "odd";
		$(".thumb-slider .thumb").each(function(){
		
		    $(this).css("left", animalThumbWidthOffset * col);
		    if(alt == "odd"){
		    	animalColsTotal ++;
		    	alt = "even";
		    	$(this).css("top", 0);
		    } else {
		    	alt = "odd";
		    	$(this).css("top", animalThumbHeightOffset);
		    	col ++;
		    }
		    $(this).css("position", "absolute");
		});
		    			
		$(".animal-pictures-box .selector-nav-left").click(function(){
		    animalCurrentCol -= animalColsPerPage;
		    panSelector();
		});
		$(".animal-pictures-box .selector-nav-right").click(function(){
		    animalCurrentCol += animalColsPerPage;
		    panSelector();
		});
		
		panSelector();
		
		var emptytext = $("#block-views-Animals-block_2 .view-empty").text();
		if (emptytext && emptytext != ""){  
			$(".animal-pictures-box").prepend("<div class=\"empty\">"+emptytext+"</div>");
		}
			
		
	}
	
	//$("#block-views-Animals-block_2").html("");
	
	
});

function panSelector(){
	$(".animal-pictures-box .selector-nav-left").css('opacity',1);
	$(".animal-pictures-box .selector-nav-right").css('opacity',1);
	if (animalCurrentCol >= animalColsTotal - animalColsPerPage){
		animalCurrentCol = animalColsTotal - animalColsPerPage;
		$(".animal-pictures-box .selector-nav-right").animate({'opacity': 0.1}, 500);
	}
	if (animalCurrentCol <= 0){
	    animalCurrentCol = 0;
		$(".animal-pictures-box .selector-nav-left").animate({'opacity': 0.1}, 500);
	}
	$(".animal-pictures-box .thumb-slider").animate({'left': -animalCurrentCol * animalThumbWidthOffset}, 500);
}