var featureList;
var featureListName;
var tab1contents;
var tab2contents;
var tab3contents;
var tab4contents;
var updating;

var sid;
var cls;
var cli;
var cln;

function watchAutomaticOnLoad(watchArgs)
{
  var oldOnLoad;
  if (!watchArgs) { watchArgs = {}; }
  oldOnLoad = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = function() {
      watch_init();
    };
  } else {
    window.onload = function() {
      oldOnLoad();
      watch_init();
    };
  }
}

function watch_init()
{
    updating = false;
    var lChangeIndex = document.getElementById('_ctl0_HiddenPos').value;
    var tIndex = 0;
    if(lChangeIndex == 1)
        tIndex = 1;
    if(lChangeIndex == 3)
        tIndex = 2;
    if(lChangeIndex == 5)
        tIndex = 3;
    if(lChangeIndex == 8)
        tIndex = 4;
    
    var loadingGif = new Image;
    loadingGif.src = "images/barLoader.gif";
        
	var myContentString = "<table width=\"100%\"><tr><td>";
	myContentString = myContentString + "<div class=\"tabber\"><div class=\"tabbertab";
	//ADD info for setting default (starting)
	if(tIndex ==1)
	    myContentString = myContentString + " tabbertabdefault";
	myContentString = myContentString + "\"><h3>Sizes</h3>";
	myContentString = myContentString + "<div id=\"tab1contents\" name=\"tab1contents\" style=\"height:400px;overflow:auto;\">";
	myContentString = myContentString + "contents of tab 1 here...</div></div>";
	myContentString = myContentString + "<div class=\"tabbertab"
	if(tIndex ==2)
	    myContentString = myContentString + " tabbertabdefault";
	myContentString = myContentString + "\"><h3>Cases</h3><div id=\"tab2contents\" name=\"tab2contents\"";
	myContentString = myContentString + "style=\"height:400px;overflow:auto;\">contents of tab 2 here...</div></div>";
	myContentString = myContentString + "<div class=\"tabbertab";
	if(tIndex ==3)
	    myContentString = myContentString + " tabbertabdefault";
	myContentString = myContentString + "\"><h3>Dials</h3><div id=\"tab3contents\" name=\"tab3contents\" style=\"height:400px;overflow:auto;\">";
	myContentString = myContentString + "contents of tab 3 here...</div></div>";
	myContentString = myContentString + "<div class=\"tabbertab";
	if(tIndex ==4)
	    myContentString = myContentString + " tabbertabdefault";
	myContentString = myContentString + "\"><h3>Bands</h3><div id=\"tab4contents\" name=\"tab4contents\" style=\"height:400px;overflow:auto;\">";
	myContentString = myContentString + "contents of tab 4 here...</div></div></td></tr></table>";
	document.getElementById("watchMenu").innerHTML = myContentString;
	myContentString = "";
	
	var sValue = document.getElementById('_ctl0_HiddenSize').value;
	var cValue = document.getElementById('_ctl0_HiddenCase').value;
	var dValue = document.getElementById('_ctl0_HiddenDial').value;
	var bValue = document.getElementById('_ctl0_HiddenBand').value;
	
	sid = document.getElementById('_ctl0_sid').value;
	cls = document.getElementById('_ctl0_cls').value;
	cli = document.getElementById('_ctl0_cli').value;
	cln = document.getElementById('_ctl0_cln').value;
	
	document.getElementById("tab1contents").innerHTML = sValue;
	document.getElementById("tab2contents").innerHTML = cValue;
	document.getElementById("tab3contents").innerHTML = dValue;
	document.getElementById("tab4contents").innerHTML = bValue;
	
	//Now enable the row hovering routine.
    var table = document.getElementById('SizeTable');
    var rows = table.getElementsByTagName('tr');
    var i;
    for(i=0;i<rows.length;i++)
    {
        rows[i].onmouseover = RowOn;
        rows[i].onmouseout = RowOff;
    }
    table = document.getElementById('CaseTable');
    rows = table.getElementsByTagName('tr');
    for(i=0;i<rows.length;i++)
    {
        rows[i].onmouseover = RowOn;
        rows[i].onmouseout = RowOff;
    }
    table = document.getElementById('DialTable');
    rows = table.getElementsByTagName('tr');
    for(i=0;i<rows.length;i++)
    {
        rows[i].onmouseover = RowOn;
        rows[i].onmouseout = RowOff;
    }
    table = document.getElementById('BandTable');
    rows = table.getElementsByTagName('tr');
    for(i=0;i<rows.length;i++)
    {
        rows[i].onmouseover = RowOn;
        rows[i].onmouseout = RowOff;
    }
	tabberAutomatic();
	updateWatch("20--------");
}
function ShowRow1(elm,BgColor,FgColor)
{
    elm.bgColor = BgColor;
}
function highlightRow(elm, hover, highlight)
{
    var BgColor = (hover)?'#DDDDDD':'#FFFFFF';
    var FgColor = 'black';
    var Cursor = (hover)?'hand':'auto';
    ShowRow1(elm,BgColor,FgColor);
    return false;
}
function RowOn() {return highlightRow(this,true,false);}
function RowOff() {return highlightRow(this,false,false);}

    
//******************************************************************************************************************************//
function combineStrings(string1,string2)
{
	var rString = new String;
	rString = string2;
	var i;
	for(i=0;i<10;i++)
	{
		if(string1.slice(i,i+1) != '-')
		{
			rString = "" + rString.slice(0,i) + string1.slice(i,i+1) + rString.slice(i+1);
		}
	}
	return(rString);
}
//******************************************************************************************************************************//
function popupimg()
{
    var currentWatch = document.getElementById('_ctl0_HiddenwID').value;
    if(currentWatch == null||currentWatch.length < 10)
        return (false);
	window.open('popup.aspx?src=images/product/large/' + currentWatch + '.jpg','LargerImage'+currentWatch,'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=auto,resizable=no,copyhistory=no,width=610,height=840,left=0,top=0');
	return (true);
}
function getPos(string1)
{
    var i;
    for(i=0;i<10;i++)
	{
		if(string1.slice(i,i+1) != '-')
		{
			return i;
		}
	}
}
function getLen(string1)
{
    var i,j,c=-1;
    for(i=0;i<10;i++)
	{
		if(string1.slice(i,i+1) != '-')
		{
			for(j=i;j<10;j++)
			{
			    c++;
			    if(string1.slice(j,j+1) == '-')
			    {
			        return(c);
			    }
			}
		}
	}
	return(c);
}
//******************************************************************************************************************************//
function updateWatch(feature)
{
    if(updating == true)
    {
        //alert('canceling overlapping update.');
        return;
    }
    updating = true;
	document.getElementById('_ctl0_HiddenPos').value = getPos(feature);
	document.getElementById('_ctl0_HiddenLen').value = getLen(feature);
	document.getElementById('_ctl0_HiddenNewwID').value = combineStrings(feature,document.getElementById('_ctl0_HiddenwID').value);
	document.getElementById('_ctl0_HiddenSize').value = "";
	document.getElementById('_ctl0_HiddenCase').value = "";
	document.getElementById('_ctl0_HiddenDial').value = "";
	document.getElementById('_ctl0_HiddenBand').value = "";
	document.getElementById('desc').style.color = 'gray';
	var winW = 630, winH = 460;
    if (parseInt(navigator.appVersion)>3) {
     if (navigator.appName=="Netscape") {
      winW = window.innerWidth;
      winH = window.innerHeight;
     }
     if (navigator.appName.indexOf("Microsoft")!=-1) {
      winW = document.body.offsetWidth;
      winH = document.body.offsetHeight;
     }
    }
    document.getElementById('loadingGraphicBar').style.left = ((winW/2)-30)+'px';
	document.getElementById('loadingGraphicBar').style.display = '';
	ExecuteCallOnFreeChannel("watchgenAjax.aspx?sid="+sid+"&cls="+cls+"&cli="+cli+"&cln="+cln+"&sku="+document.getElementById('_ctl0_HiddenNewwID').value+"&pos="+getPos(feature)+"&len="+getLen(feature));
}
function CallbackMethod(response,channel)
{
    var splitResult = response.split('|');   
    var newwID = splitResult[0];
    document.getElementById('_ctl0_HiddenNewwID').value = newwID;
    document.getElementById('_ctl0_HiddenwID').value = newwID;
    //change the main image...  (should implement some kind of loading sequence here.)
    var theMainImg = document.getElementById('_ctl0_ProductImg');
    theMainImg.src = 'DrawWatch.aspx?sku='+newwID;
    
    var menuMask1 = splitResult[1];
    var menuMask2 = splitResult[2];
    var menuMask3 = splitResult[3];
    
    var descHTML = splitResult[4];
    
    //update menu visibility
    var i;
    for(i=0;i<menuMask1.length;i++)
        if(menuMask1.slice(i,i+1) == '0')
            document.getElementById('menu_1_'+i).style.display = 'none';
        else
            document.getElementById('menu_1_'+i).style.display = '';
    
    for(i=0;i<menuMask2.length;i++)
        if(menuMask2.slice(i,i+1) == '0')
            document.getElementById('menu_2_'+i).style.display = 'none';
        else
            document.getElementById('menu_2_'+i).style.display = '';
    
    for(i=0;i<menuMask3.length;i++)
        if(menuMask3.slice(i,i+1) == '0')
            document.getElementById('menu_3_'+i).style.display = 'none';
        else
            document.getElementById('menu_3_'+i).style.display = '';
    
    //update the description
    document.title = 'Design Your Bohlin Watch - ' + newwID;
    
    //see if we are on SSL...
    /*
    if(location.protocol.toLowerCase()=='http:')//try to call the tracker...
    {
        document.getElementById('opentrackerSrc').src = 'http://server1.opentracker.net?site=www.bohlinmade.com';
    }else{
        document.getElementById('opentrackerSrc').src = 'https://server10.opentracker.net?site=www.bohlinmade.com';
    }
    */
    
    //disable buy button if "Call for Price"
    
    if(descHTML.indexOf("Call For Price") != -1){
        //disable the add to cart button
        document.getElementById('_ctl0_addToCart').disabled=true;
    }else{
        document.getElementById('_ctl0_addToCart').disabled=false;
    }
    
    document.getElementById('desc').innerHTML = descHTML;
    document.getElementById('desc').style.color = '';
    
    //wait for the image to finish loading, ignore this if the browser is Safari.
    if(navigator.appName == 'Netscape')
    {
        if(navigator.vendor.indexOf('Apple') != -1){
            document.getElementById('loadingGraphicBar').style.display = 'none';
            updating = false;
        }else{
            waitFor(theMainImg);
        }
    }else{
        waitFor(theMainImg);
    }
    
}

function waitFor(img){
    if(!img.complete){
        //alert('waiting for ' + img.src);
        setTimeout('waitFor(img)',250);
    }else{
        document.getElementById('loadingGraphicBar').style.display = 'none';
        updating = false;
    }
}
watchAutomaticOnLoad();