// JS carousels script - (c) Copyright Hertsmedia.com 2011

imageRatio = 1.4
getSizes = function(){
scrSize = document.viewport.getDimensions();
scrWidth = scrSize.width;
productWidth= Math.ceil(scrWidth / 3); 
containerHeight = Math.floor(productWidth * imageRatio );  // floor, better shorter with no gaps if odd float
}
getSizes();// for container height, so called early


/// defaults product  
productLeftPos=0; 
numClicksProducts=0;


/// defaults thumbs    
thumbsLeftPos=0; 
numClicksThumbs=0;
carouselItemWidth=102 ; //and in main php  inc

hideOverflow = function(){$('products').style.overflow='hidden'; } // non js remove scroll bars


// prods
hideControls = function() { $('controls').hide()}
showControls = function() {new Effect.Appear('controls' , {duration:0.3})}

// thumbs
hideCarouselControls = function() { new Effect.Fade('carouselControls' , {duration:0.2})}
showCarouselControls = function() { new Effect.Appear('carouselControls' , {duration:0.4})}

//loading animation
hideLoading = function() { new Effect.Fade('loading' , {duration:0.2})}
showLoading = function() { new Effect.Appear('loading' , {duration:0.4})}


// show / hide thumbs strip 
hideThumbnails=function(){
hideCarouselControls(); 
$('hideThumbs').hide(); 
$('showThumbs').show(); 
new Effect.Morph('carouselList' ,{ style: 'top:180px'  , duration:0.3}); 
} 

showThumbnails=function(){
$('hideThumbs').show(); 
$('showThumbs').hide(); 
new Effect.Morph('carouselList' ,{ style: 'top:0px'  , duration:0.3, afterFinish:function(){showCarouselControls()} 
}); 
}


///products fnc 

productSetup=function(theId,  prodLoop ){
$('product' + theId).style.width=productWidth + 'px'; 
if (prodLoop < 3) {$('product' + theId).hide(); new Effect.Appear('product' + theId  , {duration:0.9})  } //first 3 only
//if (prodLoop < 3) new Effect.Opacity( 'product' + theId , {duration: 1.4, from: 0, to: 1  }); // fade in first 3 only
}

initProducts = function(numProducts){ 
maxClicksProducts = numProducts   - 3; 
$('products').style.height= containerHeight  + 'px';
$$('.products').each(function(productListItem) {  $(productListItem.id).style.width= productWidth + 'px' ; }) ;
//$$('.products img').each(function(productImg) { new Effect.Appear(productImg.id, {duration:0.6}) }) ;
$('loading').hide();
showControls(); 
}



//thumbs carousel
initThumbs = function(numProducts){
$('thumbsBaseStrip').show();	
thumbsOnScreen = Math.floor(scrWidth/carouselItemWidth);
maxClicksThumbs = numProducts - thumbsOnScreen ;
}


resizeSetup = function(){
getSizes();
initProducts();
initThumbs();
$('productList').style.left= '-' + eval(numClicksProducts  * productWidth) + 'px';
$('products').style.height= containerHeight  + 'px'; 
}



//actions
function moveProducts(direction){
if (direction=='fwd' && numClicksProducts  <  maxClicksProducts )   {numClicksProducts++ ;  productLeftPos =  '-' + eval(numClicksProducts * productWidth ); hideControls() }
if (direction=='back' && numClicksProducts > 0 ) { numClicksProducts-- ; productLeftPos =  '-' + eval(numClicksProducts * productWidth ); hideControls() }
if (productLeftPos>0) productLeftPos = 0;
new Effect.Morph('productList' ,{ style: 'left:' + productLeftPos +'px'  , duration:0.3,  transition: Effect.Transitions.linear , afterFinish:function(){showControls() }  })
//$('logo').innerHTML =   '<br>Prod Clicks: ' + numClicksProducts   + ' / ' + maxClicksProducts ;
}


function moveCarousel(direction){
if (direction=='fwd' && numClicksThumbs  <  maxClicksThumbs  )   { thumbsLeftPos -= carouselItemWidth; numClicksThumbs++ ; hideCarouselControls();}
if (direction=='back' && numClicksThumbs > 0 ) { thumbsLeftPos += carouselItemWidth; numClicksThumbs-- ; hideCarouselControls();}
if (thumbsLeftPos>0) thumbsLeftPos = 0; 
new Effect.Morph('carouselList' ,{ style: 'left:' + thumbsLeftPos +'px'  , duration:0.2 ,  transition: Effect.Transitions.linear , afterFinish:function(){ showCarouselControls() } })
//$('logo').innerHTML =   maxClicksProducts +'<br>Prod Clicks: ' + numClicksProducts   + ' / ' + maxClicksProducts + ' / on screen = ' + thumbsOnScreen ;
}
 

function clickedThumb(itemClicked){
leftPos = 0 - (itemClicked * productWidth ) + productWidth ;// main prodW in 4 x carousel above
numClicksProducts= itemClicked -1  ; // first click is not counted asneeds 2 clicks to replicate a move
if (itemClicked > maxClicksProducts) { leftPos = 0 - (maxClicksProducts * productWidth ) ;  numClicksProducts  = maxClicksProducts ; }
if (itemClicked == 0 )           { leftPos = 0  ; numClicksProducts=0; numClicksProducts  = 0 ; }
new Effect.Morph('productList' ,{ style: 'left:' + leftPos +'px'  , duration:0.3 ,  transition: Effect.Transitions.linear}) 
//$('logo').innerHTML = 'Th Clicked: ' + itemClicked   + ' / ' + maxClicksProducts +'<br>Prod Clicks: ' + numClicksProducts   + ' / ' + maxClicksProducts ;
} 
 
/// eo thumbs fnc 


showInfo =function(prodId){
new Effect.Appear('info' + prodId , { duration:0.2} );
return false;
}

hideInfo =function(prodId){
new Effect.Fade('info' + prodId , { duration:0.6} );
return false;
}

productImageEnlarge = function(prodId){
showLoading()
$('largeImage').src='../xthumbs2/' + prodId +'/1.jpg' ; // ?cache=' + Math.random(1000000);
doZoom(1);
new Effect.Appear('largeImageContainer' , {duration:0.3 } );
hideLoading()
$('largeImage').onload=function(){ 
$('largeImage').src='../xphotos/' + prodId +'/1.jpg' ; 
}
return false;	
}

hideImageEnlarge =function(prodId){
new Effect.Fade('largeImageContainer' , { duration:0.3  ,  afterFinish:function(){  $('largeImage').style.top = '0px';  $('largeImage').src=''}  });
doZoom(0);
return false;	
}


//enlarge image
var pixelsPerMouseMove;
var  largeImageHeight;
containerTop = 111;
 
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE);
var mouseY = 0;

function imageZoom(e) {
imageTopPoz=0;
if (IE)  { mouseY = event.clientY + document.body.scrollTop;}
else    { mouseY = e.pageY;}  
if (mouseY < 0) mouseY = 0; 

if ( mouseY <= containerTop) $('largeImage').style.top = '0px';
//if ( mouseY >=   maxMouseYPos ) $('largeImage').style.bottom = '0px';
if ( mouseY > containerTop &&  mouseY <  maxMouseYPos )  { 
imageTopPoz =   Math.ceil( (mouseY    - 110 )  * pixelsPerMouseMove ) ; 
$('largeImage').style.top = '-' + imageTopPoz  +'px'; 
}
return true;
}

function setupZoom(){  
largeImageHeight = Math.ceil( scrWidth * imageRatio) ; 
$('largeImage').style.top = '0px'; 
maxMouseYPos = (containerTop + containerHeight  )     ;
pixelsPerMouseMove =  Math.floor(largeImageHeight / eval(maxMouseYPos  ) );  
}

doZoom=function(trueFalse){ 
if (trueFalse ==1) {setupZoom() ;document.onmousemove = imageZoom; } 
if (trueFalse ==0) document.onmousemove = null;
}//eo fn


//window resize
window.onresize=function(){
	resizeSetup() ;
	setupZoom();
}
  
// keyboard  cursor
document.onkeyup = getKeyPressed;
function getKeyPressed(eventKey) {							 
if( !eventKey ) {
if( window.event ) {//Internet Explorer
eventKey = window.event;
} 
else return;
}
if( typeof( eventKey.keyCode ) == 'number'  )eventKey = eventKey.keyCode; 
else if( typeof( eventKey.which ) == 'number' ) eventKey = eventKey.which; 
else if( typeof( eventKey.charCode ) == 'number'  ) eventKey = eventKey.charCode; 
else {return;}

// now actions:
if ( eventKey==37)  { moveProducts('back');return ;} // <   nav
if ( eventKey==39)  { moveProducts('fwd') ;return} //  > nav
}