$(document).ready(function(){
//============================================
// pixelwork.com 
//============================================


//--------------------
//Clear search field
//--------------------

// clear search field when clicked
$("#keywords").click(function(){
clearSearch();
});

// mouseover of search field.
$("#keywords").mouseover(function(){
var searchFieldContent = $("#keywords").attr("value");
//console.log("search text is: %s", searchFieldContent);

// if the search field hasn't been edited clear it.
if (searchFieldContent == "Search"){
clearSearch();
//console.log("search has not been edited");
}

});

//function clearSearch
function clearSearch(){
$("#keywords").attr("value","");
//console.log("search cleared");
}

//============================================

//--------------------
//jewellery items page
//--------------------

$("#CatSelect_GroupContainer img").mouseover(function(){
      $(this).animate({opacity: 0.0
});
	 }).mouseout(function(){
	      $(this).animate({
	  opacity: 1.0
	});
});

//============================================

//--------------------
//jewellery detail page 
//--------------------

//fade in main pic
//$("#Detail_Image_Container img").css("display","none");
//$("#Detail_Image_Container img").fadeIn(2000);

// remove some style because of new wrapper
$("#CatSelect_GroupContainer").css("border","none");
$("#CatSelect_GroupContainer").css("margin","0px");

//show previous and next buttons
$(".next, .prev").css("display","block");

//default starting position.
$("#Detail_ThumbSlider_Container").scrollLeft( 0 );


//need to loop when mouse down and stop when up!!
$(".next").mousehold(function () { 
	var ScrollPos = $("#Detail_ThumbSlider_Container").scrollLeft();
	$("#Detail_ThumbSlider_Container").scrollLeft( ScrollPos + 20 );
});



$(".prev").mousehold(function () { 
	var ScrollPos = $("#Detail_ThumbSlider_Container").scrollLeft();
	$("#Detail_ThumbSlider_Container").scrollLeft( ScrollPos - 20 );
});


$("#Detail_ThumbSlider_Container").css("width","366px");
$("#Detail_ThumbSlider_Container").css("overflow","hidden");

//scollpanes on the page.
$('#CatSelect_GroupContainer').jScrollPane({showArrows:true}); 


//----------------------------------------------


//Keep current thumb in view
function centreCurrent(){

	var thumbSlider = $('#Detail_ThumbSlider_Container');	// Parent wrapper which holds the thumbs.
	var thumbSliderWidth = $(thumbSlider).css("width");
	var numthumbSliderWidth = parseFloat(thumbSliderWidth, 10);	// The width of the thumb container
	var thumbMargin = 4;	// Thumbs margin
	var thumbWidth = 49+thumbMargin;	// The width of a thumb. + right margin
	

	
	var viewableThumbs = numthumbSliderWidth/thumbWidth;	// number of viewable thumbs at one time
	var offset = -216;	// Set offset. -80 for now.
	var numOfThumbs = $(thumbSlider).children().size();	// Get how many thumbs inside wrapper.	
 	var target = $('#Detail_ThumbSlider_Container .current img');	// Current thumb to center.
	var targetIndex = $("#Detail_ThumbSlider_Container a").index($(".current"))+1;	// Index of . current


	var scrollTo = (thumbWidth*targetIndex)+offset;	// Where it should scroll to.
		$("#Detail_ThumbSlider_Container").scrollLeft(scrollTo);	// Scoll thumb to current position. 
	
	
	// print to console
	//console.log("NUMBER OF THUMBS: %s ---> TARGET:%s ---> TARGET-INDEX is:%s ----> SCROLLTO:%n -------> VIEWABLE: %n", numOfThumbs,target,targetIndex,scrollTo,viewableThumbs );
}

centreCurrent();
	
	
//============================================


//----------------
// PREVIOUS & NEXT 
//----------------

// get links based on EE output of thumbs which have the correct order!
var prevThumb = $("#Detail_ThumbSlider_Container .current").prev().attr("href");
var currentThumb = $("#Detail_ThumbSlider_Container .current").attr("href");
var nextThumb = $("#Detail_ThumbSlider_Container .current").next().attr("href");

// print to consol
//console.log("prev thumb is: %s current thumb is: %s next thumb is: %s", prevThumb, currentThumb, nextThumb );

// add these links to the next & prev buttons
$(".DetailBackButton p a").attr("href", prevThumb );
$(".DetailNextButton p a").attr("href", nextThumb );

// fadeout buttons when we get to the ends
if (prevThumb == null){
	$(".DetailBackButton p a").fadeOut("slow");
}

if (nextThumb == null){
	$(".DetailNextButton p a").fadeOut("slow");
}


//============================================

//---------------------
//  Diamonds page (4c's)
//----------------------

// add "click here to open" ??!!?!?!?!
$("#4cs li h1").append(" <small style='color:#b9b9b9;font-size:10px;'>(Click here to open)</small>"); 


$("#4cs li").addClass("closed");
$("#4cs li").css("height","42px");
$("#4cs li").css("overflow","hidden");
$("#4cs li h1").css("cursor","pointer");
$("#4cs li").css("cursor","hand");

$("#4cs li h1").css("lineHeight","12px");




$("#4cs li").click(function(){

$("#4cs li .open h1 small").text("");

	$("#4cs li").css("height","42px");
	$("#4cs li").css("overflow","hidden");
	$("#4cs li").removeClass("open");
	$("#4cs li").addClass("closed");

	$(this).css("height","auto");
	
	$(this).removeClass("closed");
	$(this).addClass("open");
});
	

$("#4cs li .open").click(function(){
	
	$(this).css("height","14px");

});

//============================================




});