// This carousel can contain any number of product items.
// each item is listed in an array as can be seen below.
// For example the radiator array contains 8 radiators.

// the carousel is initialised by a call to carouselInitialise,
// which is triggered when the page loads via an onload handler in
// the html body statement.

var carouselSelected = 0;
var carouselDisplayOffset = 0;
// default carousel type
var carouselItemType = 'custom';
var carouselItems = new Array();
var maxCarouselDisplaySlots = 5;

function carouselInitialise() {

	var carouselPanel = ID("carousel-panel");	
  
	var carouselElementDesc = [];
	var carouselThumb = [];
	var carouselFull = [];

	carouselItems[carouselItemType] = [];		
	
	var divs = document.getElementsByTagName('div');
	for (var i = 0; i < divs.length; i++) {
		/* locate all divs with 'carouselElementDesc' in their class attribute */
		if (/\bcarouselElementDesc\b/.exec(divs[i].className)) {
			carouselElementDesc[carouselElementDesc.length] = divs[i].innerHTML;
		}
	} 
	for(var i=0; i<carouselElementDesc.length; i++) {
		if(carouselItems[carouselItemType][i] == undefined) carouselItems[carouselItemType][i] = new Object();		
		carouselItems[carouselItemType][i].desc = carouselElementDesc[i]; 		
	}
	
	
	var imgs = document.getElementsByTagName('img');
	for (var i = 0; i < imgs.length; i++) {
		/* locate all imgs with 'carouselThumb' in their class attribute */
		if (/\bcarouselThumb\b/.exec(imgs[i].className)) {
			carouselThumb[carouselThumb.length] = imgs[i].src;
		}		
		/* locate all imgs with 'carouselFull' in their class attribute */
		if (/\bcarouselFull\b/.exec(imgs[i].className)) {
			carouselFull[carouselFull.length] = imgs[i].src;
		}		
	} 
	for(var i=0; i<carouselFull.length; i++) {
		if(carouselItems[carouselItemType][i] == undefined) carouselItems[carouselItemType][i] = new Object();		
		carouselItems[carouselItemType][i].image = carouselFull[i]; 		
	}
	for(var i=0; i<carouselThumb.length; i++) {
		if(carouselItems[carouselItemType][i] == undefined) carouselItems[carouselItemType][i] = new Object();		
		carouselItems[carouselItemType][i].image_thumb = carouselThumb[i]; 		
	}	
 
  
	var string = "";
	string = '<input class="carousel-scroll-button" id="carousel-prev" type="image" src="/images/content/prev_grey.gif" onclick="scrollPrev();" alt="Continue"/>';
	
	// find out if the number of items in the carousel is actually *less* than the number of display slots allocated.
	// if so, then reduce the display slots to match the number of items in the carousel.
	var displaySlotsTruncated = false;
	if(ID("carouselhalf"))
	{
	maxCarouselDisplaySlots = 4;
	}
	if(maxCarouselDisplaySlots > carouselFull.length) {
		maxCarouselDisplaySlots = carouselFull.length;
		displaySlotsTruncated = true;
	}

	// write out all the display slots	
	for(var i=0; i<maxCarouselDisplaySlots; i++) {
		string += '<div class="carousel-thumbnail not-selected" onclick="selectThumbnail('+i+');" id="carousel-thumb-0'+i+'">&nbsp;</div>';						
	}
	string += '<input class="carousel-scroll-button" id="carousel-next" type="image" ';

	// however, if the display slots now matches the number of items on display, grey out the carousel next button,
	// so that the user does not expect to see more items.	
	if(displaySlotsTruncated) {	
		string += 'src="/images/content/next_grey.gif"';
	}
	else {
		string += 'src="/images/content/next.gif"';		
	}
	
	string += ' onclick="scrollNext();" alt="Continue"/>';
	string += '<div class="clearer"></div>';
	if(ID("carouselhalf"))
	{
	string += '<div id="carousel-image" style="width:150px;">&nbsp;</div>';
	string += '<div class="carousel-desc" id="carousel-desc" style="margin-right:10px;">&nbsp;</div>';	
	}
	else
	{
	string += '<div id="carousel-image">&nbsp;</div>';
	string += '<div class="carousel-desc" id="carousel-desc">&nbsp;</div>';	
	}					
				
	string += '<div class="clearer"></div>';
	
	carouselPanel.innerHTML = string;
    
	setcarouselThumbnails();
	selectThumbnail(0);	
}

function scrollPrev() {
	carouselDisplayOffset--;
	
	// use the following to reset the carousel to the minimum position. (offest 0)
	if(carouselDisplayOffset < 0) { carouselDisplayOffset = 0; }	
	setcarouselThumbnails();
	
	if( carouselDisplayOffset == 0 ) {
		var prev = ID('carousel-prev');
		prev.src = "/images/content/prev_grey.gif";
	}
	
	if( carouselDisplayOffset == (carouselItems[carouselItemType].length - maxCarouselDisplaySlots)-1 ) {
		var next = ID('carousel-next');
		next.src = "/images/content/next.gif";		
	}
}

function scrollNext() {
	
	carouselDisplayOffset++;

	// use the following to reset the carousel to the maximum position.
	if( (carouselDisplayOffset + maxCarouselDisplaySlots) > carouselItems[carouselItemType].length) { carouselDisplayOffset = carouselItems[carouselItemType].length - maxCarouselDisplaySlots; }
	setcarouselThumbnails();

	
	if( carouselDisplayOffset == (carouselItems[carouselItemType].length - maxCarouselDisplaySlots) ) {
		var next = ID('carousel-next');
		next.src = "/images/content/next_grey.gif";
	}
	
	if( carouselDisplayOffset == 1 ) {
		var prev = ID('carousel-prev');
		prev.src = "/images/content/prev.gif";		
	}
}

function selectThumbnail(x) {
	carouselSelected = x + carouselDisplayOffset;
	if(carouselSelected >= carouselItems[carouselItemType].length) { carouselSelected -= carouselItems[carouselItemType].length; }
	if(carouselSelected < 0) { carouselSelected += carouselItems[carouselItemType].length; }
	
	var rads = new Array();
	for( var i=0; i<maxCarouselDisplaySlots; i++) {
		rads[i] = ID( "carousel-thumb-0"+i );
	}

	for( var i=0; i<rads.length; i++ ) {
		jscss('remove', rads[i], 'selected');
		jscss('add', rads[i], 'not-selected');
	}
	jscss('swap', rads[x], 'not-selected', 'selected');
	
	var carousel_main_image = ID("carousel-image");	
	carousel_main_image.style.backgroundImage = "url("+carouselItems[carouselItemType][carouselSelected].image+")";
	var desc = ID("carousel-desc");	
	desc.innerHTML = carouselItems[carouselItemType][carouselSelected].desc;
	
}

function setcarouselThumbnails() {

	var rads = new Array();
	for( var i=0; i<maxCarouselDisplaySlots; i++) {
		rads[i] = ID( "carousel-thumb-0"+i );
	}
	
	for( var i=0; i<rads.length; i++ ) {
		var newIndex = i + carouselDisplayOffset;
		if(newIndex >= carouselItems[carouselItemType].length) { newIndex -= carouselItems[carouselItemType].length; }
		if(newIndex < 0) { newIndex += carouselItems[carouselItemType].length; }
		
		rads[i].style.backgroundImage = "url("+carouselItems[carouselItemType][newIndex].image_thumb+")";
		
		if( carouselSelected == newIndex ) {
			jscss('remove', rads[i], 'not-selected');
			jscss('add', rads[i], 'selected');
		}
		else {
			jscss('remove', rads[i], 'selected');
			jscss('add', rads[i], 'not-selected');
		}
	}
}


// a useful script to swap, add and remove css classes from an element
// therefore we don't need to reference any css style attributes in the javascript.
function jscss(a,o,c1,c2)
{
  switch (a){
    case 'swap':
      o.className=!jscss('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
    break;
    case 'add':
      if(!jscss('check',o,c1)){o.className+=o.className?' '+c1:c1;}
    break;
    case 'remove':
      var rep=o.className.match(' '+c1)?' '+c1:c1;
      o.className=o.className.replace(rep,'');
    break;
    case 'check':
      return new RegExp('\\b'+c1+'\\b').test(o.className);
    break;
  }
}