// ---------- Octo Namespace
octo = {};
octo.p = {};
octo.p.mi = {};
octo.p.mi.displays = new Array();
octo.p.mi.itemMap = new Array();
octo.p.mi.currentSwatch = 0;
octo.p.mi.currentAlt = 0;
octo.p.mi.hasClip = false;
// ---------- Octo Namespace end


// ---------- Product Page

// init
$(document).ready(function()
{     
  setSwatchClickEvents();
  setThumbClickEvents();	
  initSwatch();
  initThumbs();
});

function initSwatch()
{
	/// todo: 1. auto generate swatches from itemmap array.
	///          currently generated by server side method.
	///       2. hide swatch if outofstock
	
	// hide swatch if only 1 item exists
	if (octo.p.mi.itemMap.length == 1)
	{
	  $("#smallcolor a").css('display','none');
	}
	// select option's image index by comparing 
	// querystring oid with itemmap array
  else
  {    
    var index = 0;
    //var oid = $('#ctl00_cpBody_hfProductOptionID').attr('value');    
    var oid = $("[id$='_hfProductOptionID']").attr('value');
    	  
    // determine swatch index 
    for (var i=0; i < octo.p.mi.itemMap.length; i++)	  
    {
      if (oid == octo.p.mi.itemMap[i].oid)
      {
        index = i;
        break;  
        alert('found');
      }
    }
    octo.p.mi.currentSwatch = index;  
  }	  
	  
}

function initThumbs()
{  
  swapImages(octo.p.mi.currentSwatch); 
}

function setSwatchClickEvents()
{
	$("#smallcolor a").click(function()
	{
	  var index = 0;
	  var oid = $(this).attr("oid");	 
	  	  
	  // determine which swatch was clicked
	  for (var i=0; i < octo.p.mi.itemMap.length; i++)	  
	  {
	    if (oid == octo.p.mi.itemMap[i].oid)
	    {
	      index = i;
	      break;  
	    }
	  }
	  
	  // set the current swatch
    octo.p.mi.currentSwatch = index;
    
    // reflect option price
    if (octo.p.mi.itemMap[index].promoprice > 0)
      $("#productPrice").html('<span>$' + octo.p.mi.itemMap[index].price + "</span> <span class='discount'> $" + octo.p.mi.itemMap[index].promoprice + "</span>&nbsp;&nbsp;")
    else
      $("#productPrice").html('$' + octo.p.mi.itemMap[index].price + "&nbsp;&nbsp;")
    
    // out of stock, prevent add to basket + show nostock msg
    if (octo.p.mi.itemMap[index].stock > 0)
    {
      $("#spanNoStock").attr('style', 'display:none');
      $("[id$='_ibtnAddToBasket']").attr('style', '');
    }
    else
    {
      $("#spanNoStock").attr('style', '');
      $("[id$='_ibtnAddToBasket']").attr('style', 'display:none');
    }
    
    // set thumbnails and main image(hide or show thumb boxes depending on the quantity of images available)
    swapImages(index);
    
    // set hidden-field to selected oid           
    //$('#ctl00_cpBody_hfProductOptionID').attr('value', oid);
    $("[id$='_hfProductOptionID']").attr('value', oid);
	  		
		return false;
	});  
}

function setThumbClickEvents()
{
	$("p.thumbs a").click(function()
	{  
		  		  
    var altImageArray = octo.p.mi.displays[octo.p.mi.currentSwatch].images;    
    for (var i=0; i < altImageArray.length; i++)	    
    {                  
      // if 5 alternate images detected, exit
      if (i == 4)
        break;       
      // match clicked thumbnail with imageArray thumbnail      
      if ($(this).find("img").attr("src") == altImageArray[i].thumb)
      {
        // set zoom image
        $("#zoomimg").attr({ href: altImageArray[i].large, alt: '' });
        
        // set main image
        $("#largeImg").attr({ src: altImageArray[i].main, alt: '' });
        break;
      }                 
    } 		
		
		return false;
	});
}


function swapImages(index)
{ 
  // index out of bounds prevention 
  if (index >= octo.p.mi.displays)
    return;
    
  // determine quantity of images to swap  
  var altImageArray = octo.p.mi.displays[index].images;  
    
  if (altImageArray.length > 0)  
  {
    // set out zoom image
    $("#zoomimg").attr({ href: altImageArray[0].large, alt: '' });
  
    // set the main image
    $("#largeImg").attr({ src: altImageArray[0].main, alt: '' });
            
    // get our thumbnails with embedded images
    var thumbs = $("p.thumbs a");
    
    // hide thumbnails
    thumbs.css('display', 'none');       
    
    // set thumbnail image
    for (var i=0; i < altImageArray.length; i++)	
    {         
      // if 5 alternate images detected, exit
      if (i == 4)
        break;   
        
      // set alt thumb
      $(thumbs[i]).find('img').attr({ src: altImageArray[i].thumb, alt: '' });
            
      // display thumbnail
      $(thumbs[i]).css('display', '');    
    }    
  }  
}