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 < numTilesAllowed()) {
        _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 < numTilesAllowed(); 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 " + numTilesAllowed().toString() + " 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);
    }
}

function numTilesAllowed() {
    var num = 6; // default
    if (numberTilesAllowed && numberTilesAllowed[0]) {
        num = parseInt(numberTilesAllowed[0], 10);
    }
    return num;
}