// OVERLABELS

// a clean, accessible technique for visually locating a field name inside of the field itself
// without tampering with the initial value. Submitting the form without touching any of the fields
// provides an empty set of data, rather than sending “username” and “password” to your script as values. 
// Furthermore, we can easily add these “overlabels” to any form by adding a class name, a little bit of CSS, and the JavaScript code provided below.

// As icing on the cake, if the user visits the site without JavaScript or CSS capabilities,
// the form is still usable and the labels will lie next to each field as was originally intended 
// before your designers got involved. 

// SOURCE = http://www.alistapart.com/articles/makingcompactformsmoreaccessible


function initOverLabels () {
  if (!document.getElementById) return;  	

  var labels, id, field;

  // Set focus and blur handlers to hide and show 
  // LABELs with 'overlabel' class names.
  labels = document.getElementsByTagName('label');
  for (var i = 0; i < labels.length; i++) {
	
    if (labels[i].className == 'overlabel') {

      // Skip labels that do not have a named association
      // with another field.
      id = labels[i].htmlFor || labels[i].getAttribute('for');
      if (!id || !(field = document.getElementById(id))) {
        continue;
      }

      // Change the applied class to hover the label 
      // over the form field.
      labels[i].className = 'overlabel-apply';

      // Hide any fields having an initial value.
      if (field.value !== '') {
        hideLabel(field.getAttribute('id'), true);
      }

      // Set handlers to show and hide labels.
      field.onfocus = function () {
        hideLabel(this.getAttribute('id'), true);
      };
      field.onblur = function () {
        if (this.value === '') {
          hideLabel(this.getAttribute('id'), false);
        }
      };

      // Handle clicks to LABEL elements (for Safari).
      labels[i].onclick = function () {
        var id, field;
        id = this.getAttribute('for');
        if (id && (field = document.getElementById(id))) {
          field.focus();
        }
      };

    }
  }
};

function hideLabel (field_id, hide) {
  var field_for;
  var labels = document.getElementsByTagName('label');
  for (var i = 0; i < labels.length; i++) {
    field_for = labels[i].htmlFor || labels[i].getAttribute('for');
    if (field_for == field_id) {
      labels[i].style.textIndent = (hide) ? '-1000px' : '0px';
      return true;
    }
  }
}

holderWidth = function(){
	if(document.getElementById("holder")) {
		var numberOfDivs = 0;
		var totalWidth = 0;
		var itemDivWidth = 282; //width of the item
		var itemDivMarginRight = 10; //right-margin of the item
		var currentDiv = document.getElementById("holder");
		for (i=0; i<currentDiv.childNodes.length; i++){
			nav = currentDiv.childNodes[i];
			if (nav.className == "view-all-item") {
				nav.style.width = itemDivWidth + "px";
				nav.style.marginRight = itemDivMarginRight +"px";
				numberOfDivs++; 	
			}
		}
		totalWidth = (itemDivWidth + itemDivMarginRight) * numberOfDivs;
		currentDiv.style.width = totalWidth + "px";
	}
}

// START of- for Size guides  on Product Page
var lastSizeGuideIndex;
defText = "Move your pointer over the options above for Size Guide."// <strong>'A'&'B' relate to actual garment measurements</strong>"
defTitle = "Choose a Size";
outputText = function (outputTitle,output) {
	document.getElementById("outputTitle").innerHTML = outputTitle;
	document.getElementById("output").innerHTML = output;		
}
restoreText = function () {
	document.getElementById("outputTitle").innerHTML = defTitle;
	document.getElementById("output").innerHTML = defText;
}



alertLoad = function(){
	if(sizeGuidesExist=='yes'){
	
		if(stock.length==1){
			// call chageSizeGuide
			changeSizeGuide(0);
		}else if(defaultSizeGuideIndex!=-1){
			changeSizeGuide(defaultSizeGuideIndex);
		}else{
			restoreText();
			currentElement = document.getElementById("options");
			for (i=0; i<currentElement.childNodes.length; i++) {
				nav = currentElement.childNodes[i];
				if (nav.id != undefined) {
					nav.onmouseover = function (){
					this.className += " radioover";
					outputText(sizeLables[this.id],sizeGuides[this.id]);
					};
					nav.onmouseout = function (){
						this.className += "";
						changeSizeGuide(lastSizeGuideIndex);
					};
				}
			}
		}
	}
}

function changeSizeGuide(sgIndex)
{
	if(sizeGuidesExist=='yes'){
		var lTitle=defTitle;
		var lText = defText;
		
		if(sizeLables[sgIndex]!=undefined)
		{
			lTitle = sizeLables[sgIndex]	
			lText= sizeGuides[sgIndex];
		}	
		
		document.getElementById("outputTitle").innerHTML = lTitle +'<br>';
		document.getElementById("output").innerHTML=lText;
		lastSizeGuideIndex = sgIndex;
	}else{
		return;
	}
}
// END of- for Size guides  on Product Page



window.onload = function () {
  setTimeout(initOverLabels, 50);
  holderWidth();
  // if it is a proudct page call alertLoad for size guide text.
  if(document.getElementById("outputTitle")){
  	alertLoad();
  }
  if(document.getElementById("item-nav")){
  	startList();
  }
  
};