var _blendData;
var _totalPct = 0;

var _tileIDs = new Array();
var _tilePcts = new Array();
var _tileImgs = new Array();

var _blendMenuHider = null;
var _blendMenuOverTimer = null;

var _allowedString;

function resetBlend()
{
    $get("results").innerHTML = "";
    enableEmailButton(false);
    
    var checks = document.getElementsByTagName("input");
    var checkRe = /^chk(\d+)$/;
    for (var i = 0; i < checks.length; i++)
    {
        if(checks[i] != null && checkRe.test(checks[i].id))
        {
            if(checks[i].checked)
            {
                var div = checks[i].parentNode.id;
                tileClick(div);
            }
        }
    }
}

function init()
{
    enableEmailButton(false);
    enableGoButton(false);
    preloadImages();
    setSize(1, 0, 1, 0);
}

function preloadImages()
{
    new Image().src = "images/gradientblendtool/btn_resetblend_off.gif";
    new Image().src = "images/gradientblendtool/btn_blend_on.gif";
    new Image().src = "images/gradientblendtool/btn_send_on.gif";
}

function reverseBlend()
{
    _tileIDs.reverse();
    _tileImgs.reverse();
    _tilePcts.reverse();
    _blendData = _blendData.split(",").reverse().join();
    displayTiles();
    getBlend();
}

function tileOver(o)
{
}

function tileOut(o)
{
}

function addTile(tileID, tilePct, tileImg)
{
    added = false;
    if(_tileIDs.length < 6)
    {
        _tileIDs.push(tileID);
        _tileImgs.push(tileImg);
        _tilePcts.push(tilePct);
        
        displayTiles();
        added = true;
    }
    
    return added;
}

function removeTile(tileID)
{
    var i = getTileIndexByID(tileID);
    if(i > -1)
    {
        _tileIDs.splice(i, 1);
        _tilePcts.splice(i, 1);
        _tileImgs.splice(i, 1);

        displayTiles();
        getBlendData(true);
    }
}

function getTileIndexByID(tileID)
{
    var index = -1;
    for (var i = 0; i < _tileIDs.length; i++)
    {
        if(_tileIDs[i] == tileID)
        {
            index = i;
            break;
        }
    }
    
    return index;
}

function setTilePct(index, pct)
{
    _tilePcts[index] = pct;
}

function buildAreaClick(ind)
{
	if(_tileIDs.length > ind)
	{
		tileClick(_tileIDs[ind]);
	}
}

function displayTiles()
{
    var i;
    for (i = 0; i < _tileIDs.length; i++)
    {
        var imgDiv = $get("areaImg" + i.toString());
        imgDiv.style.backgroundImage = _tileImgs[i];
        imgDiv.style.cursor = "pointer";
        
        var pctBox = $get("pct" + i.toString());
        pctBox.value = _tilePcts[i];
        pctBox.disabled = false;
    }
    
    for (; i < 6; i++)
    {
        var imgDiv = $get("areaImg" + i.toString());
        imgDiv.style.backgroundImage = "";
        imgDiv.style.cursor = "";
        
        var pctBox = $get("pct" + i.toString());
        pctBox.value = "";
        pctBox.disabled = true;
    }
}

function tileClick(tileID)
{
	var sender = $get(tileID);
    var checkBox = $get("chk" + tileID);

	if(!checkBox.checked && sender.attributes != null && sender.attributes["collection"] != null)
	{
		if(!isCollectionAllowed(sender.attributes["collection"].value))
		{
			alert("You cannot add a tile from this collection into the chosen blend pattern.");
			return;
		}
	}

    checkBox.checked = !checkBox.checked;
    var checked = checkBox.checked;
    
    if(!checked)
    {
		sender.childNodes[1].style.display = "none";
        removeTile(tileID);
    }
    else
    {
        if(addTile(tileID, 0, sender.style.backgroundImage))
        {
			if(sender.childNodes.length < 2)
			{
				var selImg = document.createElement("img");
				selImg.src = "images/gradientblendtool/tile_select.gif";
				sender.appendChild(selImg);
            }
            else
            {
				sender.childNodes[1].style.display = "";
            }
        }
        else
        {
            alert("A blend may only contain six tiles.");
            checkBox.checked = false;
        }
        
    }
    
    if(_totalPct >= 100 || _totalPct == 0)
    {
        getBlendData(true);
    }
}

function userPct(txtBox, dontGetData)
{
    var index = parseInt(txtBox.id.substr(txtBox.id.length - 1), 10);

    var iPct = parseInt(txtBox.value, 10);
    if(iPct == 0 || isNaN(iPct))
    {
        iPct = 0;
        txtBox.value = "";
    }
    
    _tilePcts[index] = iPct;
    if(!dontGetData)
    {
        getBlendData(false);
    }
}

//var _pctTimer = null;
function fixPct(txtBox, getData)
{

    if(txtBox.value != "")
    {
        txtBox.value = new String(parseInt(txtBox.value), 10);
    }
    
    userPct(txtBox, true);

    getBlendData(false);

//    if(_pctTimer != null)
//    {
//        clearTimeout(_pctTimer);
//    }
//    _pctTimer = setTimeout("getBlendData(false); _pctTimer = null;", 1000);
}

function getBlendData(equalize)
{
    var blendData = "";
    var pctTotal = 0;
    
    if(equalize)
    {
        if(_tileIDs.length > 0)
        {
            var eachPct = Math.floor(100 / _tileIDs.length);
            var extra = 100 - (eachPct * _tileIDs.length);
            for (var i = 0; i < _tileIDs.length; i++)
            {
                _tilePcts[i] = eachPct;
            }
            
            for (var i = 0; i < extra; i++)
            {
                _tilePcts[i] = eachPct + 1;
            }
        }
        
        displayTiles();
    }

    for(var i = 0; i < _tileIDs.length; i++)
    {
        var pct = _tilePcts[i];
        pctTotal += pct;
        blendData += _tileIDs[i] + "." + pct.toString() + ",";
    }

    var totalClass = "pctTotal";
    var info = "&nbsp;";
    if(pctTotal != 100)
    {
        totalClass = "pctTotalBad";
    }
    
    enableGoButton(pctTotal == 100);
    
    if(pctTotal > 100)
    {
        info = "Need to remove " + new String(pctTotal - 100) + "%";
    }
    else if (pctTotal < 100)
    {
        info = "Need to add " + new String(100 - pctTotal) + "%";
    }
    
    var blendText = "Total: <span class=\"" + totalClass + "\">" + new String(pctTotal) + "%&nbsp;" + info + "</span>";

    $get("rightArea").innerHTML = blendText;

    if(pctTotal == 0)
    {
        $get("rightArea").style.visibility = "hidden";
    }
    else
    {
        $get("rightArea").style.visibility = "visible";
    }

    if(blendData.length > 0)
    {
        blendData = blendData.substr(0, blendData.length - 1);
    }

    _blendData = blendData;
    _totalPct = pctTotal;
}

function setZoom(tileSizePrefix, groutWidth)
{
    document.getElementById("grTileSizePrefix").value = tileSizePrefix;
    document.getElementById("grGroutWidth").value = groutWidth;
}

function stringCounter()
{
	var _keys = new Array();
	var _counts = new Array();
	
	this.add = 
		function(key)
		{
			var keyCheck = key.toLowerCase();
			var i;
			var found = false;
			for(i = 0; i < _keys.length; i++)
			{
				if(_keys[i].toLowerCase() == keyCheck)
				{
					_counts[i]++;
					found = true;
					break;
				}
			}
			if(!found)
			{
				_keys.push(key);
				_counts.push(1);
			}
		}
		
	this.getCount =
		function(key)
		{
			key = key.toLowerCase();
			var result = 0;
			for(var i = 0; i < _keys.length; i++)
			{
				if(_keys[i].toLowerCase() == key)
				{
					result = _counts[i];
				}
			}
			return result;
		}
}

function getBlend()
{
    var blendOK = true
    var tiles = _blendData;
	var tmpID = parseInt($get("grBlendID").value, 10);

    if(tiles == null || tiles == "")
    {
        alert("You must select tile percentages first.");
        blendOK = false;
    }

	if(blendOK)
	{
		var sc = new stringCounter();
		var aTiles = tiles.split(",");
		for(var i = 0; i < aTiles.length; i++)
		{
			var tileID = aTiles[i].split(".")[0];
			sc.add(tiledata.get(tileID).coll);
		}
		var tmpData = null;
		for(var i = 0; i < blendtemplates.length; i++)
		{
			if(blendtemplates[i].id == tmpID)
			{
				tmpData = blendtemplates[i];
				break;
			}
		}
		if(tmpData != null)
		{
			var errMsg = "";
			for(var i = 0; i < tmpData.getCollCount(); i++)
			{
				if(!blendOK)
				{
					break;
				}
				var coll = tmpData.getColl(i);
				if(coll.mn > 0)
				{
					if(sc.getCount(coll.nm) < coll.mn)
					{
						blendOK = false;
						if(coll.mx == coll.mn)
						{
							errMsg += "The selected pattern requires " + coll.mn + " from " + coll.nm + ".\n";
						}
						else
						{
							errMsg += "The selected pattern requires at least " + coll.mn + " from " + coll.nm + ".\n";
						}
					}
				}
				if (coll.mx > 0)
				{
					if(sc.getCount(coll.nm) > coll.mx)
					{
						blendOK = false;
						errMsg += "The selected pattern cannot contain more than " + coll.mx + " from " + coll.nm + ".\n";
					}
				}
			}
			if(!blendOK)
			{
				alert(errMsg);
			}
		}
		
	}    
    
    if(blendOK)
    {
        fixDimensions();
		var tileSizePrefix = document.getElementById("grTileSizePrefix").value;
		var groutWidth = parseInt(document.getElementById("grGroutWidth").value, 10);
		var groutRGB = $get("grGroutColor").value;

		enableEmailButton(false);
		document.title = "Creating blend...";
		enableGoButton(false);
		$get("doReset").disabled = true;
		$get("doReset").src = "images/gradientblendtool/btn_resetblend_off.gif";

		var TEMPLATE = $get("grBlendID").value != "0";
		if(TEMPLATE)
		{
			PageMethods.GetTemplateBlend(
				tmpID,
				tiles,
				groutWidth,
				tileSizePrefix,
				groutRGB,
				blendDone);
		}
		else
		{
			var widFt = $get("grWidthFt").value;
			var widIn = $get("grWidthIn").value;
			var hgtFt = $get("grHeightFt").value;
			var hgtIn = $get("grHeightIn").value;
	        
			PageMethods.GetGradient(
				tiles,
				widFt, // width in feet
				widIn, // width in inches
				hgtFt, // height in feet
				hgtIn, // height in inches
				groutWidth, // grout width
				tileSizePrefix, // size prefix
				groutRGB, // grout ID
				blendDone);
		}
        
		_loading = true;
		startBlendTimer();
	}
}

function blendDone(html)
{
    $get("results").innerHTML = html;

    document.title = "Loading blend image from server...";

    var imagePath = $get("gradientImagePath").value;
    _image = new Image();
    _image.src = imagePath;
    $get("imgGradient").src = _image.src;
    location.href = "#top";
}

function blendImageLoadComplete()
{
    clearBlendTimer();
    _loading = false;
    
    enableGoButton(true);
    $get("doReset").disabled = false;
    $get("doReset").src = "images/gradientblendtool/btn_resetblend_on.gif";
    enableEmailButton(true);
    document.title = _origTitle;
}

function blendTimeout()
{
    if(confirm("The server is taking a long time to respond.\n\nClick OK to keep waiting or Cancel to stop waiting."))
    {
        if(_loading)
        {
            startBlendTimer();
        }
    }
    else
    {
        blendImageLoadComplete();
    }
}

function startBlendTimer()
{
    if(_timeout != null)
    {
        clearTimeout(_timeout);
    }
    _timeout = setTimeout("blendTimeout();", 30000);
}

function clearBlendTimer()
{
    if(_timeout != null)
    {
        clearTimeout(_timeout);
    }
}

function enableGoButton(vl)
{
    $get("doGradient").disabled = !vl;
    $get("doReverse").disabled = !vl;
    var st = "off";
    if(vl)
    {
        st = "on";
    }
    $get("doGradient").src = "images/gradientblendtool/btn_blend_" + st + ".gif";
    $get("doReverse").src = "images/gradientblendtool/btn_reverse_blend_" + st + ".gif";

}

function setSize(htFt, htIn, wdFt, wdIn)
{
    $get("grHeightFt").value = htFt;
    $get("grHeightIn").value = htIn;
    $get("grWidthFt").value = wdFt;
    $get("grWidthIn").value = wdIn;
}

function chkMark(sender, exclusiveName)
{
    var checked = (sender.src.indexOf("check_on") < 0);
    
    if(checked)
    {
        sender.src = "images/gradientblendtool/check_on.gif";
        
        if(exclusiveName != null && exclusiveName != "")
        {
            var checks = document.getElementsByName(exclusiveName);
            for (var i = 0; i < checks.length; i++)
            {
                if(checks[i] != sender)
                {
                    checks[i].src = "images/gradientblendtool/check_off.gif";
                    checks[i].checked = false;
                }   
            }
        }
        
        sender.checked = checked;
    }
    else
    {
        if(exclusiveName == null && exclusiveName == "")
        {
            sender.src = "images/gradientblendtool/check_off.gif";
            sender.checked = checked;
        }
    }

}

function isCollectionAllowed(coll)
{
	if(_allowedString != null)
	{
		var re = new RegExp("~" + coll + "~");
		return re.exec(_allowedString);
	}
	else
	{
		return true;
	}
}

function setAvailableTiles(colls)
{
	var aColls = colls.split(",");
	_allowedString = "~" + aColls.join("~") + "~";
	var els = document.getElementsByTagName("div");
	for (var i = 0; i < els.length; i++)
	{
		var el = els[i];
		if(el.attributes != null && el.attributes["collection"] != null)
		{
			var coll = el.attributes["collection"].value;
			if(isCollectionAllowed(coll))
			{
				//el.style.display = "";
				el.style.opacity = 1;
				el.style.filter = "alpha(opacity=100)";
			}
			else
			{
				//el.style.display = "none";
				el.style.opacity = .3;
				el.style.filter = "alpha(opacity=30)";

				var id = el.id;
				var checkBox = $get("chk" + id);
				if(checkBox != null)
				{
					if(checkBox.checked)
					{
						tileClick(id);
					}
				}
			}
			
		}
	}
	els = document.getElementsByName("tileheader");
	for (var i = 0; i < els.length; i++)
	{
		var el = els[i];
		if(el.attributes != null && el.attributes["collection"] != null)
		{
			var coll = el.attributes["collection"].value;
			if(isCollectionAllowed(coll))
			{
				//el.style.display = "";
				el.style.opacity = 1;
				el.style.filter = "alpha(opacity=100)";
			}
			else
			{
				//el.style.display = "none";
				el.style.opacity = .3;
				el.style.filter = "alpha(opacity=30)";
			}
		}
	}
}

function blendMenuClick()
{
	clearBlendMenuOverTimer();
	if(!blendMenuVisible())
	{
		showBlendMenu(true);
	}
}
function clearBlendMenuOverTimer()
{
	if(_blendMenuOverTimer != null)
	{
		clearTimeout(_blendMenuOverTimer);
	}
}
function setBlendMenuOverTimer()
{
	_blendMenuOverTimer = setTimeout("blendMenuClick();", MENUSHOWDELAY);
}

function showBlendMenu(vl)
{
	clearBlendMenuOverTimer();
    var o = $get("blendMenu");
    if(o != null)
    {
        var disp = "none";
        if(vl)
        {
            disp = "";
        }
        else
        {
			blendMenuTimer(false);
        }
        
        o.style.display = disp;
    }
    
}

function selectBlend(o, blendID, collections, imgSrc)
{
    $get("blendSelectedName").innerHTML = $get("blendLabel" + blendID).innerHTML;
    $get("blendSelectedTip").innerHTML = $get("blendTip" + blendID).innerHTML;
    $get("blendSelectedLineArt").src = imgSrc;
    $get("grBlendID").value = blendID;
    blendOver(o, false);
    showBlendMenu(false);
    setAvailableTiles(collections);
}

function blendMenuVisible()
{
    return $get("blendMenu").style.display == "";
}

function blendOver(o, vl)
{
    blendMenuTimer(!vl);

    var back = "#ffffff";
    var bord = "#ffffff";
    if(vl)
    {
        back = "#e6ecf2";
        bord = "#5582ab";
    }
    
    o.style.backgroundColor = back;
    //o.style.borderTop = "2px solid " + bord;
}

function blendMenuOver()
{
    if(!blendMenuVisible())
    {
		setBlendMenuOverTimer();
    }
}

function blendMenuTimer(hide)
{
	clearBlendMenuOverTimer();
    if(!hide)
    {
        clearTimeout(_blendMenuHider);
    }
    else
    {
        _blendMenuHider = setTimeout("showBlendMenu(false);", MENUHIDEDELAY);
    }
}