var FamilyItems = new Array();
var FamilyItemsPricing = new Array();
var ShopColors = new Array();
var SettingItems = new Array();
var StyleItems = new Array();

function SwapImage(imgObject, type, index, ImageType)
{
  switch (ImageType)
  {
	  //0 is Product Family Rollover
	  case 0:
        //type 0 = onmouseover
        if (type == 1)
        {
		  imgObject.src = imgObject.src.replace('out', 'over');
        }
        else if (type == 0 && FamilyItems[index] == "no")
        {
		  imgObject.src = imgObject.src.replace('over', 'out');		  
        }
		break;
	  //1 is Size and Price Rollover
	  case 1:
        //type 0 = onmouseover
        if (type == 1)
        {
		  imgObject.src = imgObject.src.replace('out', 'over');			
        }
        else if (type == 0 && FamilyItemsPricing[index] == "no")
        {
		  imgObject.src = imgObject.src.replace('over', 'out');		  			
        }
		break;	  
	  case 2:
	    //2 is Color Rollover
        //type 0 = onmouseover
        if (type == 1)
        {
		  imgObject.src = imgObject.src.replace('out', 'over');			
        }
        else if (type == 0 && ShopColors[index] == "no")
        {
		  imgObject.src = imgObject.src.replace('over', 'out');
        }
		break;	
	  case 3:
	    //3 is Setting Rollover
        //type 0 = onmouseover
        if (type == 1)
        {
		  imgObject.src = imgObject.src.replace('out', 'over');			
        }
        else if (type == 0 && SettingItems[index] == "no")
        {
		  imgObject.src = imgObject.src.replace('over', 'out');
        }
		break;
	  case 4:
	    //4 is Style Rollover
        //type 0 = onmouseover
        if (type == 1)
        {
		  imgObject.src = imgObject.src.replace('out', 'over');			
        }
        else if (type == 0 && StyleItems[index] == "no")
        {
		  imgObject.src = imgObject.src.replace('over', 'out');
        }
		break;			
  }
}

function FamilyItem_OnClick(imgObject, index)
{
    HideDivs();
	
    var SelectedItem = document.getElementById('FamilyDiv').name;
	if (document.getElementById(SelectedItem) != null)
	{
	  document.getElementById(SelectedItem).src = document.getElementById(SelectedItem).src.replace('over', 'out');
	}	
	
	ResetFamilyItems();
	FamilyItems[index] = "yes";
	SwapImage(imgObject, 1, index, 0);
	
    document.getElementById('FamilyDiv').name = imgObject.id;	
	document.getElementById('StyleDiv').style.display = 'none';
	document.getElementById('PriceSizeDiv').style.display = 'none';
   	document.getElementById('ColorDiv').style.display = 'none';	
	
	if (imgObject.id == 'pf_1')  //Wellness Mats
	{
  	    GetNewItems(imgObject, 'SettingDiv');
		//document.getElementById('SettingDiv').style.display = 'none';
        //document.getElementById('ShopLandingDiv').style.display = 'none'; 		
        //document.getElementById('ShopDiv').style.backgroundImage = "url(images/shop_background_wellness.jpg)";		
		//document.getElementById('ShopDiv').style.backgroundColor = "#ffffff";
	}
	else if (imgObject.id == 'pf_2')  //Maxum Mats
	{
		GetNewItems(imgObject, 'SettingDiv');
		//document.getElementById('ShopDiv').style.backgroundImage = "url(images/shop_background_maxum.jpg)";		
		//document.getElementById('ShopDiv').style.backgroundColor = "#dadadf";
	}
	else if (imgObject.id == 'pf_4')  //Motif Collection
	{
		GetNewItems(imgObject, 'SettingDiv');
	}
}

function SettingItem_OnClick(imgObject, index)
{	
	HideDivs();
	
    var SelectedItem = document.getElementById('SettingDiv').name;
	if (document.getElementById(SelectedItem) != null)
	{
	  document.getElementById(SelectedItem).src = document.getElementById(SelectedItem).src.replace('over', 'out');
	}
	
	ResetSettingItems();
	SettingItems[index] = "yes";
	SwapImage(imgObject, 1, index, 3);
	
    document.getElementById('SettingDiv').name = imgObject.id;	
    document.getElementById('ShopLandingDiv').style.display = 'none'; 		

	if (imgObject.id == 'setting_1')  //Wellnessmat Kitchen
	{
      document.getElementById('ShopDiv').style.backgroundImage = "url(images/shop_background_wellness_kitchen.jpg)";		
  	  document.getElementById('ShopDiv').style.backgroundColor = "#ffffff";	  
	  GetNewItems(imgObject, 'PriceSizeDiv');		  
	}
	else if (imgObject.id == 'setting_2') //Maxum Mat Kitchen
	{
      document.getElementById('ShopDiv').style.backgroundImage = "url(images/shop_background_maxum_kitchen.jpg)";		
	  document.getElementById('ShopDiv').style.backgroundColor = "#e5ccae";	  
	  GetNewItems(imgObject, 'PriceSizeDiv');		  
	}	
	else if (imgObject.id == 'setting_3') //Maxum Mat Garage
	{
      document.getElementById('ShopDiv').style.backgroundImage = "url(images/shop_background_maxum_garage.jpg)";		
	  document.getElementById('ShopDiv').style.backgroundColor = "#dadadf";	  
	  GetNewItems(imgObject, 'PriceSizeDiv');
	}		
	else if (imgObject.id == 'setting_4') //Motif Collection
	{
      document.getElementById('ShopDiv').style.backgroundImage = "url(images/shop_background_motif.jpg)";		
	  document.getElementById('ShopDiv').style.backgroundColor = "#ffffff";	  
	  GetNewItems(imgObject, 'StyleDiv');
	}
}

function StyleItem_OnClick(imgObject, index)
{
	HideDivs();
	
    var SelectedItem = document.getElementById('StyleDiv').name;
	if (document.getElementById(SelectedItem) != null)
	{
	  document.getElementById(SelectedItem).src = document.getElementById(SelectedItem).src.replace('over', 'out');
	}
	
	ResetStyleItems();
	StyleItems[index] = "yes";
	SwapImage(imgObject, 1, index, 4);
	
    document.getElementById('StyleDiv').name = imgObject.id;	
    document.getElementById('ShopLandingDiv').style.display = 'none'; 	
	
    GetNewItems(imgObject, 'PriceSizeDiv');		
}

function PriceSizeItem_OnClick(imgObject, index)
{
    var SelectedItem = document.getElementById('PriceSizeDiv').name;	
	if (document.getElementById(SelectedItem) != null)
	{
      document.getElementById(SelectedItem).src = document.getElementById(SelectedItem).src.replace('over', 'out');
	}	
	
	ResetFamilyItemsPricing();
	FamilyItemsPricing[index] = "yes";
	SwapImage(imgObject, 1, index, 1);	

    document.getElementById('PriceSizeDiv').name = imgObject.id;
	
    GetNewItems(imgObject, 'ColorDiv');
	GetText(imgObject, 'Description');	
	GetText(imgObject, 'BottomGradient');	
}

function ColorItem_OnClick(imgObject, index)
{	
    GetText(imgObject, 'LargeText');
	
	switch(document.getElementById('FamilyDiv').name)
	{
		case 'pf_1':
		 GetMatImage(imgObject, 'WellnessImage1', 1);
		 GetMatImage(imgObject, 'WellnessImage2', 2);		 
		 GetMatImage(imgObject, 'MatImage', 3);	
		 document.getElementById('LargeText').style.color = '#7f8080';
		break;		
		case 'pf_2':
		 //Kitchen Setting
		 if (document.getElementById('SettingDiv').name == 'setting_2')
		 {
   		   GetMatImage(imgObject, 'MaxumImageKitchen', 1);		
         }
		 //Garage Setting
		 else if (document.getElementById('SettingDiv').name == 'setting_3')
		 {
   		   GetMatImage(imgObject, 'MaxumImage', 1);		
         }
		 GetMatImage(imgObject, 'MatImage', 3);		
		 document.getElementById('LargeText').style.color = '#7f8080';		 
		break;
		case 'pf_4':
		  GetMatImage(imgObject, 'MotifImage', 1);
		  GetMatImage(imgObject, 'MatImage', 3);
  		  document.getElementById('LargeText').style.color = '#FFF';
		break;
	}
	
	CreateCart(imgObject.id);
	
    var SelectedItem = document.getElementById('ColorDiv').name;	
	if (document.getElementById(SelectedItem) != null)
	{
      document.getElementById(SelectedItem).src = document.getElementById(SelectedItem).src.replace('over', 'out');
	}		
	
	ResetShopColors();
	ShopColors[index] = "yes";
	SwapImage(imgObject, 1, index, 2);
	
	document.getElementById('ColorDiv').name = imgObject.id;
}

function ResetFamilyItems()
{
	for(ix = 0; ix < FamilyItems.length; ix++)
	{
		FamilyItems[ix] = "no";
	}
}

function ResetSettingItems()
{
	for(ix = 0; ix < SettingItems.length; ix++)
	{
		SettingItems[ix] = "no";
	}
}

function ResetStyleItems()
{
	for(ix = 0; ix < StyleItems.length; ix++)
	{
		StyleItems[ix] = "no";
	}
}

function ResetFamilyItemsPricing()
{
	for(ix = 0; ix < FamilyItemsPricing.length; ix++)
	{
		FamilyItemsPricing[ix] = "no";
	}
}

function ResetShopColors()
{
	for(ix = 0; ix < ShopColors.length; ix++)
	{
		ShopColors[ix] = "no";
	}
}

function HideDivs()
{
  document.getElementById('WellnessImage1').style.display = 'none';		
  document.getElementById('WellnessImage2').style.display = 'none';	
  document.getElementById('MaxumImage').style.display = 'none';	
  document.getElementById('MaxumImageKitchen').style.display = 'none';
  document.getElementById('MotifImage').style.display = 'none';
  document.getElementById('LargeText').style.display = 'none';	
  document.getElementById('MatImage').style.display = 'none';	
  document.getElementById('Description').style.display = 'none';	  
  document.getElementById('AddToCart').style.display = 'none';	 
  document.getElementById('ColorDiv').style.display = 'none';
  document.getElementById('BottomGradient').style.display = 'none';
}

function gup(name)
{  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
   var regexS = "[\\?&]"+name+"=([^&#]*)";
   var regex = new RegExp( regexS );
   var results = regex.exec( window.location.href );
   if( results == null )
     return "";
   else
     return results[1];
}

function GetNewItems(imgObject, destinationDiv)
{
  var xmlhttp;
  if (window.XMLHttpRequest)
  {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if(xmlhttp.readyState==4)
    {
      document.getElementById(destinationDiv).innerHTML = xmlhttp.responseText;
  	  document.getElementById(destinationDiv).style.display = 'block';	
	  
	  if (destinationDiv == 'SettingDiv')
	  {		
	    SettingItems.length = document.getElementsByName('Setting').length;
		ResetSettingItems();
		
		//Auto select the first Setting item
		var setting = document.getElementsByName("Setting");
		if (setting.length != 0)
		{
		  SettingItem_OnClick(document.getElementById(setting[0].id), 0);		
		}
		else
		{
			alert('setting length is zero');
		}		
	  }
	  else if (destinationDiv == 'StyleDiv')
	  {
	    StyleItems.length = document.getElementsByName('Style').length;
		ResetStyleItems();	
		
		//Auto select the first Style item
		var style = document.getElementsByName("Style");
		if (style.length != 0)
		{
		  StyleItem_OnClick(document.getElementById(style[0].id), 0);		
		}
		else
		{
			alert('style length is zero');
		}		
	  }
	  else if (destinationDiv == 'PriceSizeDiv')
      {
        FamilyItemsPricing.length = document.getElementsByName('Pricing').length;
	    ResetFamilyItemsPricing();
		
        //Get the size parameter from the URL string
	    var size = gup('size');	

        //If a specific size is requested in the URL string, and FamilyDiv has a name (meaning an item is selected) then select that requested price/size item.
		//Otherwise, just select the first item in the price/size list.
        if ((size != "") && (document.getElementById('FamilyDiv').name != null))
	    {
		  var familyid = document.getElementById('FamilyDiv').name.replace('pf_', '');
		  GetRequestedSizeID(familyid, size);
	    }	
		else
		{
		  //Auto select the first size/price item
		  var sizeprice = document.getElementsByName("Pricing");
		  if (sizeprice.length != 0)
		  {
		    PriceSizeItem_OnClick(document.getElementById(sizeprice[0].id), 0);			
		  }
		  else
		  {
			  alert('sizeprice length is zero');
		  }
		}		
      }	  	
	  else if (destinationDiv == 'ColorDiv')
	  {
		ShopColors.length = document.getElementsByName('Color').length;
		ResetShopColors();
		
		//Auto select the first Color item
		var color = document.getElementsByName("Color");
		if (color.length != 0)
		{
		  ColorItem_OnClick(document.getElementById(color[0].id), 0);		
		}
		else
		{
			alert('color length is zero');
		}
	  }	  
	  else if (destinationDiv == 'LargeText')
	  {
		document.getElementById(destinationDiv).style.display = 'block';  
	  }
    }
  }
  
  xmlhttp.open("GET","createimages.php?type="+imgObject.id, true);
  xmlhttp.send(null);
}

function GetText(imgObject, destinationDiv)
{
  var xmlhttp;
  if (window.XMLHttpRequest)
  {
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if(xmlhttp.readyState==4)
    {
	  if (destinationDiv == '')
	  {
		  alert('destinationDiv is null');
	  }
		
	  if (destinationDiv == "BottomGradient")
	  {
        document.getElementById(destinationDiv).style.backgroundImage = xmlhttp.responseText;
	  }
	  else
	  {
        document.getElementById(destinationDiv).innerHTML = xmlhttp.responseText;		
	  }
      document.getElementById(destinationDiv).style.display = 'block';	  
    }
  }
  
  if (destinationDiv == "BottomGradient")
  {
    xmlhttp.open("GET","getmatimage.php?type="+imgObject.id+"&matnumber=4", true);	  
  }
  else
  {
    xmlhttp.open("GET","getmattext.php?type="+imgObject.id, true);
  }
  xmlhttp.send(null);
}

function GetMatImage(imgObject, destinationDiv, number)
{
  var xmlhttp;
  if (window.XMLHttpRequest)
  {
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if(xmlhttp.readyState==4)
    {
	  if (destinationDiv == '')
	  {
		  alert('destinationDiv is null');
	  }	

      document.getElementById(destinationDiv).style.backgroundImage = xmlhttp.responseText;
	  //document.getElementById(destinationDiv).innerHTML = xmlhttp.responseText;
	  document.getElementById(destinationDiv).style.display = 'block';	
      document.getElementById('AddToCart').style.display = 'block';
    }
  }
  xmlhttp.open("GET","getmatimage.php?type="+imgObject.id+"&matnumber="+number+"&setting="+document.getElementById('SettingDiv').name, true);
  xmlhttp.send(null);
}

function CreateCart(value)
{
  var xmlhttp;
  if (window.XMLHttpRequest)
  {
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if(xmlhttp.readyState==4)
    {
      document.getElementById('item1').value = xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","getshoppingcart.php?type="+value, true);
  xmlhttp.send(null);
}

function GetRequestedSizeID(familyid, size)
{
  var xmlhttp;
  if (window.XMLHttpRequest)
  {
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if(xmlhttp.readyState==4)
    {
	  var sizepriceitemid = xmlhttp.responseText;

	  var e = document.getElementsByName('Pricing');
	  for (ix = 0; ix < e.length; ix++)
	  {
		  //founc the pricesize element we were looking for
		  if (sizepriceitemid == e[ix].id)
		  {			  
	        PriceSizeItem_OnClick(e[ix], ix);			
			break;
		  }
	  }
    }
  }
  xmlhttp.open("GET","getrequestedsizeid.php?familyid="+familyid+"&size="+size, true);
  xmlhttp.send(null);
}