/**
* productView.js
* productZoom.js

* @author D S
*
* productView.js
*
*
* productZoom.js
* 	Allows us to zoom the product image by calculating the new image x,y offset based on the ratio of the magnifier  
*/

	var mode = '';
	
	var IMAGE_KEY = 'COLOR_IMAGE';
	var colorId = 0;
	var selectedColor = ''; 
	var selectedColorName = ' ';
	var selectedColorElement;
	
	var selectedSize = 0;
	var selectedSizeName = '';
	var selectedSizeElement;

	var prevSelectedColor = '';
	
	var sizeTemplate = '<a href="#" title="{code}" onmouseover="D$(\'sizeChoice\').innerHTML=\'{code} - {description}\';" onmouseout="D$(\'sizeChoice\').innerHTML=selectedSizeName;"  onClick="setSize(this,{colorId},\'{sizeIndex}\',\'{code}\',\'{description}\'); $(\'#addToCart\').unbind(\'click\').click(function() {addToCart(); return false;}).removeAttr(\'disabled\'); return false;"><span>{code}</span></a>';
	var inactiveSizeTemplate = '<a href="#" class="inactive" title="{code}" onmouseover="D$(\'sizeChoice\').innerHTML=\'{code} - {description}\';" onmouseout="D$(\'sizeChoice\').innerHTML=selectedSizeName;"  onClick="setSize(this,{colorId},\'{sizeIndex}\',\'{code}\',\'{description}\'); $(\'#addToCart\').attr(\'disabled\', \'disabled\'); $(\'#addToCart\').unbind(\'click\'); return false;"><span>{code}</span></a>';
	
	var commafySizes = 'NO';
	var sizeDelimiter = '';
	
	function D$(el){
		return document.getElementById(el);
	}
	
	function setColorImage(colorId){
		
		if (zoomed || (zooming == 'in')) {
			
			setImage('ImageCOLOR_ZOOM' + colorId); 
		} else {
			setImage('Image' + IMAGE_KEY + mode + colorId);
		}
	}

	
	function setImage(key){
		
		var newImg = imageMap[key];
		// see if we have an image for this color
		if (newImg) {
			D$('productDescImg').src = newImg;
		}
	}
	
	function setBackImage(){
		mode = '_BACK';
		setImage('Image' + IMAGE_KEY + mode + colorId);
	}
	
	function setFrontImage(){
		mode = '';
		setImage('Image' + IMAGE_KEY + colorId);
	}

    /* -----------------------------------------------------------------
     * function: checkColorAlloc 
     *  purpose: checks to see if there is any inventory in that color  
     *   author: M K
     *     date: 6-18-2008
     *   parms: myColor  color id to check for inventory 
     *     returns 0 if cant allocate, 1 if can allocate
     * -----------------------------------------------------------------
     */
    function checkColorAlloc(myColor) {    
          if (ignoreAlloc == true){
         	return 1;
          }
          
          var canAlloc = 0;
          for (var c=0; c < alloc.length; c++)
          {
     
              if (alloc[c].indexOf(myColor) >= 0)
              {
                canAlloc = 1;
              }          
          }
          return canAlloc;
    }
  
    /* -----------------------------------------------------------------
     * function: checkColorSizeAlloc 
     *  purpose: checks to see if there is any inventory in that color and size 
     *   author: M K
     *     date: 6-18-2008
     *   parms: myColor  color id to check for inventory 
     *          mySize   size code to check for inventory
     *     returns 0 if cant allocate, 1 if can allocate
     * -----------------------------------------------------------------
     */
    function checkColorSizeAlloc(myColor, mySize) {    
         if (ignoreAlloc == true){
         	return 1;
         }
          var canAlloc = 0;
          for (var c=0; c < alloc.length; c++)
          {
     
              if (alloc[c].indexOf(myColor+";"+mySize) >= 0)
              {
                canAlloc = 1;
              }          
          }
          return canAlloc;
    }
	
	function setColor(el, _colorId, name) {
	
		if (prevSelectedColor == _colorId){
			return;
		}
		prevSelectedColor = _colorId;
		
		var allc = checkColorAlloc(_colorId);
		
		if (allc == 1)
		{
		  var frm = document.forms['orderForm'];
		
		
	      selectedColorName = name;
		  clearSelectedSize();

		  setColorImage(_colorId);
		  //ImagePRODUCT_MAIN
		  frm.colorId.value = _colorId;
		
		  // set previously selected color 
		  if (selectedColor && selectedColorElement){
			selectedColorElement.className = "";
		  }

		  selectedColor = _colorId;
		  colorId = _colorId;
		  selectedColorElement = el;
		  selectedColorElement.className = "selected";
		
		  var sizes = colors[colorId];
		
		  var sizeList = '';
		
		  // loop through each size for this color, and generate the html, using the template above.
		  for (var i = 0; i < sizes.length; i++){
			  if(sizes[i].available > 0) {
				  sizeList += " " + sizeTemplate.replace(/{code}/g,sizes[i].code).replace(/{colorId}/g,colorId).replace(/{sizeIndex}/g,i).replace(/{description}/g,sizes[i].description); 
			  }
			  else {
				  sizeList += " " + inactiveSizeTemplate.replace(/{code}/g,sizes[i].code).replace(/{colorId}/g,colorId).replace(/{sizeIndex}/g,i).replace(/{description}/g,sizes[i].description);
			  }
		  } 

		  document.getElementById('pviewSize').innerHTML = sizeList;
		}
		else
		{
		  alert("no inventory in stock to fulfill that item request");
		}
	}

	function setSize(el, colorId, sizeIndex, sizeName, sizeDescription) {
		
		var frm = document.forms['orderForm'];
		var allc = checkColorSizeAlloc(colorId, sizeName);
		if (allc == 1)
		{
	 	  if (selectedSize){
	 		  if($(selectedSizeElement).hasClass("inactiveSelected")) {
	 			  $(selectedSizeElement).removeClass("inactiveSelected").addClass("inactive");
	 		  }
	 		  else {
	 			  selectedSizeElement.className = "";
	 		  }
	 	  }
		  selectedSizeName = sizeName + ' - ' + sizeDescription;
		  selectedSize = sizeIndex;
		
		  var color = colors[colorId];
		  var size = color[sizeIndex];
		
		  selectedSizeElement = el;
		  if($(selectedSizeElement).hasClass("inactive")) {
			  $(selectedSizeElement).removeClass("inactive").addClass("inactiveSelected");
		  }
		  else {  
			  $(selectedSizeElement).addClass("selected");
		  }
		  
		  D$('retailPrice').innerHTML = size.basePrice;
		  D$('salePrice').innerHTML = size.salePrice;
		 
		  document.forms['orderForm'].skuId.value = size.skuId;
		}
		else
		{
		  alert("no inventory in stock to fulfill that item request");
		}
		
	}
	
	function clearSelectedSize(){
		selectedSizeName = '';
		D$('sizeChoice').innerHTML=selectedSizeName;
		selectedSize = null;
		document.forms['orderForm'].skuId.value = '';
	}

/**
* productZoom.js
*
* @author D S
*
*/

/*
function calculateOffsetLeft(el){
	
	if (el.nodeName != 'BODY'){
		if (el.parentNode){
		
			if (el.offsetLeft != el.parentNode.offsetLeft){
				return 0 + calculateOffsetLeft(el.parentNode);
			} else {
				return el.offsetLeft + calculateOffsetLeft(el.parentNode);
			}	
		}
	} 
	
	return 0;
}

function calculateOffsetTop(el){
	
	if (el.nodeName != 'BODY'){
		if (el.parentNode){
		
			if (el.offsetTop != el.parentNode.offsetTop){
				return el.offsetTop  + calculateOffsetTop(el.parentNode);
			} else {
				return 0 + calculateOffsetTop(el.parentNode);
			}	
		}
	} 
	
	return 0;
}


function moveZoom(e){
	var width = 340;
	var height= 349;

	var scaleRatio = 2.35;

	var zoomX = 0;
	var zoomY = 0;

	var borderX = 0;
	var borderY = 0;

	var zoomerWidth = 120;
	var zoomerHeight = 120;

	//var xCenter = 50 + document.getElementById('sourceContainer').offsetLeft;
	//var yCenter = 50 + document.getElementById('sourceContainer').offsetTop;
	var xCenter = 50 + calculateOffsetLeft ( D$('sourceContainer') );
	var yCenter = 50 + calculateOffsetTop ( D$('sourceContainer') );
	
	if (!e) var e = window.event;

	if (e.pageX && e.pageY) {
		zoomX = e.pageX; 
		zoomY = e.pageY;
	}

	else if (e.clientX && e.clientY) {
		zoomX = e.clientX;
		zoomY = e.clientY;
	}

	// le

	//document.getElementById('zoom').innerHTML = document.getElementById('sourceContainer').offsetLeft + "," + document.getElementById('sourceContainer').offsetTop + "<br>";
	//document.getElementById('zoom').innerHTML += (zoomX - xCenter + 1) + "," + (zoomY - yCenter + 1) + "<br>";
	
	
	if ( (zoomX - xCenter) < 0) zoomX = xCenter;
	if ( (zoomX - xCenter) > (width - zoomerWidth - 2)) zoomX = (width - zoomerWidth -2) + xCenter;
	
	if ( (zoomY - yCenter ) < 0) zoomY = yCenter;
	if ( (zoomY - yCenter) > (height - zoomerHeight - 2)) zoomY = (height - zoomerHeight -2) + yCenter;
	
	var finalX = zoomX - xCenter;
	var finalY = zoomY - yCenter;
	//document.getElementById('zoom').innerHTML += (finalX) + "," + (finalY) + "<br>";
	
	document.getElementById('zoom').style.left = finalX + 'px';
	document.getElementById('zoom').style.top = finalY + 'px';

	document.getElementById('zoomImage').style.left = (-scaleRatio *  (finalX )) + 'px';
	document.getElementById('zoomImage').style.top = (-scaleRatio * (finalY )) + 'px';

  }

function hideZoom() {
	document.getElementById('zoom').style.display = 'none';
	document.getElementById('zoomContainer').style.display = 'none';
	
}

function showZoom() {
	document.getElementById('zoom').style.display = 'block';
	document.getElementById('zoomContainer').style.display = 'block';
	
}	*/