var selectedTab = ""
var page = ""
var aInstr = new Array()
aInstr[1] = "Select one or more brands from the list below: ";
aInstr[2] = "Select one or more colors from the list below: ";
aInstr[3] = "Select a size from the list below: ";


function Filter(type)
{
	if(selectedTab == type)
	{
		Hide();
		clearTabs();
	}
	else
	{
		Hide();
		selectedTab = type;
		var dv = document.getElementById("dvfilter");
		dv.style.display = "block";
		var action = "&colors="+document.Form1.Headercontrol3_hcolors.value+"&brands="+escape(document.Form1.Headercontrol3_hbrands.value)+"&size="+document.Form1.Headercontrol3_hsize.value+"&filter="+type

		sndReq(action)
	}
}

function clearTabs()
{
	var dv;
	if(page != "brands")
	{
		dv = document.getElementById("tab1");
		dv.style.backgroundImage = 'none'
		//dv.style.backgroundColor = '#E4E5EA'
		
		dv = document.getElementById("hl1");
		dv.style.color = 'black'
	}
	
	dv = document.getElementById("tab2");
	dv.style.backgroundImage = 'none'
	//dv.style.backgroundColor = '#E4E5EA'
	
	dv = document.getElementById("tab3");
	dv.style.backgroundImage = 'none'
	//dv.style.backgroundColor = '#E4E5EA'
	
	
	dv = document.getElementById("hl2");
	dv.style.color = 'black'
	
	dv = document.getElementById("hl3");
	dv.style.color = 'black'
}

function showTab(tab)
{
	var item = document.getElementById("tab"+tab)
	item.style.color = 'white'
	//item.style.backgroundColor = '#333333'
	item.style.backgroundImage = 'url(/tillys/images/tab.gif)'
	
	item = document.getElementById("hl"+tab)
	item.style.color = 'white'
	item.blur();
	
	var txt = document.getElementById("instructions")
	txt.innerHTML = aInstr[tab];
	
	checkClear()
}

function checkClear()
{
	var btn = document.getElementById("btnClear");
	if((document.Form1.Headercontrol3_hbrands.value == "" || page == "brands") && document.Form1.Headercontrol3_hcolors.value == "" && document.Form1.Headercontrol3_hsize.value == "")
	{
		btn.style.display = "none";
	}
	else
	{
		btn.style.display = "inline";
	}
}

function Hide(type)
{
	selectedTab = "";
	var dv = document.getElementById("dvfilter");
	dv.style.display = "none";
}

function clearFilters()
{

	var blist = document.Form1.Headercontrol3_hbrands.value.split("|")
	var clist = document.Form1.Headercontrol3_hcolors.value.split("|")
	try
	{
		for(i=0;i<blist.length;i++)
		{
			if(blist[i] != "")
			{
				var item = document.getElementById("dv"+blist[i])
				item.style.border = "solid 1px #E4E5EA";
			}
		}
	}
	catch(ex)
	{
	}
	try
	{
		for(i=0;i<clist.length;i++)
		{
			if(clist[i] != "")
			{
				var item = document.getElementById("dv"+clist[i])
				item.style.border = "solid 1px #E4E5EA";
			}
		}
	}
	catch(ex)
	{
	}
	try
	{
		if(document.Form1.Headercontrol3_hsize.value != "")
		{
			var item = document.getElementById("dv"+document.Form1.Headercontrol3_hsize.value);
			item.style.border = "solid 1px #E4E5EA";
		}
	}
	catch(ex)
	{
	}
	document.Form1.Headercontrol3_hbrands.value = "";
	document.Form1.Headercontrol3_hcolors.value = "";
	document.Form1.Headercontrol3_hsize.value = "";
	
	checkClear()
	
	var action = "&colors=&brands=&size=&filter="+selectedTab

	sndReq(action)
	
	return false;
}


function SetSelections()
{
	var blist = document.Form1.Headercontrol3_hbrands.value.split("|")
	var clist = document.Form1.Headercontrol3_hcolors.value.split("|")
	try
	{
		for(i=0;i<blist.length;i++)
		{
			if(blist[i] != "")
			{
				var item = document.getElementById("dv"+blist[i])
				item.style.border = "solid 1px #333333";
			}
		}
	}
	catch(ex)
	{
	}
	try
	{
		for(i=0;i<clist.length;i++)
		{
			if(clist[i] != "")
			{
				var item = document.getElementById("dv"+clist[i])
				item.style.border = "solid 1px #333333";
			}
		}
	}
	catch(ex)
	{
	}
	try
	{
		if(document.Form1.Headercontrol3_hsize.value != "")
		{
			var item = document.getElementById("dv"+document.Form1.Headercontrol3_hsize.value);
			item.style.border = "solid 1px #333333";
		}
	}
	catch(ex)
	{
	}
}
	
function SetSize(size)
{
	var item = document.getElementById("dv"+size)
	var oldvalue = document.Form1.Headercontrol3_hsize.value
	
	if(document.Form1.Headercontrol3_hsize.value == size)
	{
		document.Form1.Headercontrol3_hsize.value = ""
		item.style.border = "solid 1px #E4E5EA";
	}
	else
	{
		if(oldvalue != "")
		{
			var olditem = document.getElementById("dv"+oldvalue)
			olditem.style.border = "solid 1px #E4E5EA";
		}
		
		item.style.border = "solid 1px #333333";
		document.Form1.Headercontrol3_hsize.value = size
	}
	checkClear();
}
	
function addToBrandList(brand)
{
	var item = document.getElementById("dv"+brand)
	
	if(document.Form1.Headercontrol3_hbrands.value.search(brand) > -1)
	{
		var slist = document.Form1.Headercontrol3_hbrands.value.split("|")
		for(i=0;i<slist.length;i++)
		{
			if(brand==slist[i]) slist.splice(i, 1);
		}
		document.Form1.Headercontrol3_hbrands.value = slist.join("|")
		item.style.border = "solid 1px #E4E5EA";
	}
	else
	{
		item.style.border = "solid 1px #333333";
		document.Form1.Headercontrol3_hbrands.value += "|"+brand
	}
	checkClear();
}
	
function addToColorList(color)
{
	var item = document.getElementById("dv"+color)
	
	if(document.Form1.Headercontrol3_hcolors.value.search(color) > -1)
	{
		var slist = document.Form1.Headercontrol3_hcolors.value.split("|")
		for(i=0;i<slist.length;i++)
		{
			if(color==slist[i]) slist.splice(i, 1);
		}
		document.Form1.Headercontrol3_hcolors.value = slist.join("|")
		item.style.border = "solid 1px #E4E5EA";
	}
	else
	{
		item.style.border = "solid 1px #333333";
		document.Form1.Headercontrol3_hcolors.value += "|"+color
	}
	checkClear();
}

function createRequestObject() {
    var ro;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}

var http = createRequestObject();
var url = 'filter.aspx';
var filter = ""

function sndReq(action) {
    document.getElementById("scroll").innerHTML = "<div align=\"center\" style=\"padding-top: 30px\"><img src=\"/tillys/images/loading.gif\"></div>";
    http.open('get', url+action);
    http.onreadystatechange = handleResponse;
    http.send(null);
}

function handleResponse() {
    if (http.readyState == 4 && http.status == 200) {
        var response = http.responseText;

        document.getElementById("scroll").innerHTML = response;
        //Scroller.updateAll();
		SetSelections();
        Scroller.reset("scroll")
        }
    }