var _dropZone;
var _dropZoneCount;
var _tileBin = new Array();
var _origTileBinHTML = new Array();
var _origTileIDs = new Array();

var _numTileBins;

var _tileResetter = null;

function init()
{
    _numTileBins = parseInt(numberTileBins[0], 10);

    _dropZone = $get("rightArea");
    _dropZoneCount = _dropZone.childNodes.length;
    
    var i = 0;
    for (; i < _numTileBins; i++)
    {
        _tileBin.push($get("leftArea" + i));
        _origTileBinHTML.push(_tileBin[i].innerHTML);
    }
    
    addDragDropListBehavior();

    loadOrigTileIDs();
    reloadTileBin();
    
    setInterval("checkForDroppedTiles();", 300);
    
    preloadImages();
    
    $get("adjustPct").disabled = true;
    $get("btnSendEmail").disabled = true;
    $get("grSymmetric").checked = false;
}

function preloadImages()
{
    new Image().src = "images/gradientblendtool/btn_create_off.gif";
    new Image().src = "images/gradientblendtool/btn_reset_off.gif";
    new Image().src = "images/gradientblendtool/btn_adjust_on.gif";
    new Image().src = "images/gradientblendtool/btn_send_on.gif";
    new Image().src = "images/gradientblendtool/btn_reverse_grad_off.gif";
    new Image().src = "images/gradientblendtool/hdr_grad_buildarea_direction_rev.png";
}

function addDragDropListBehavior()
{
    var i = 0;
    for (; i < _numTileBins; i++)
    {
		try
		{
			$create(Sys.Preview.UI.DragDropList, 
				{'acceptedDataTypes' : new Array('HTML'), 'dragDataType': 'HTML', 'dragMode': Sys.Preview.UI.DragMode.Move,
					'direction': Sys.Preview.UI.RepeatDirection.Vertical}, null, null, $get("leftArea" + i));
		}
		catch(e){}

    }
}

function loadOrigTileIDs()
{
    var i;
    var ii;
    _origTileIDs = new Array();
    
    for(ii = 0; ii < _tileBin.length; ii++)
    {
        var tempArray = new Array();
        for(i = 0; i < _tileBin[ii].childNodes.length; i++)
        {
            var ele = _tileBin[ii].childNodes[i];
            if(ele.className == "item")
            {
                tempArray.push(ele.id);
            }
        }
        _origTileIDs.push(tempArray);
    }
}

function checkForDroppedTiles()
{

    var newCount = countTilesInDropZone();
    if(_dropZoneCount != newCount)
    {
        if(newCount > _dropZoneCount) // a tile was added
        {
            reloadTileBin();
            enableAdjustPct(false);
        }
        else // a tile was removed - do we need to do anything here?
        {
            if(_tileResetter != null)
            {
                clearTimeout(_tileResetter);
            }
            _tileResetter = setTimeout("reloadTileBin();", 1000);
            
            enableAdjustPct(false);        
        }
        
        _dropZoneCount = newCount;
    }
}

function reloadTileBin()
{

    var ii;
    for(ii = 0; ii < _tileBin.length; ii++)
    {
    
        // restore original HTML
        _tileBin[ii].innerHTML = _origTileBinHTML[ii];
        
        // iterate tiles and add the drag-drop behavior again.
        var i;
        for(i = 0; i < _origTileIDs[ii].length; i++)
        {
			try
			{
				$create(Sys.Preview.UI.DraggableListItem, {'handle':$get(_origTileIDs[ii][i])}, null, null, $get(_origTileIDs[ii][i]));
			}
			catch(e){}
        }
    }
    
}

function resetGradient()
{
    _dropZone.innerHTML  = "";
    $get("results").innerHTML = "";
    enableEmailButton(false);
    enableAdjustPct(false);
    reloadTileBin();
}

function countTilesInDropZone()
{
    var i;
    var tileCount = 0;
    for(i = 0; i < _dropZone.childNodes.length; i++)
    {
        var ele = _dropZone.childNodes[i];
        if(ele.className == "item")
        {
            tileCount++;
        }
    }
    return tileCount;
}

function getGradientList()
{
    var i;
    var tiles = "";
    var reverse = $get("grReverse").checked;
    
    if(reverse)
    {
        for(i = _dropZone.childNodes.length - 1; i >= 0; i--)
        {
            var ele = _dropZone.childNodes[i];
            if(ele.className == "item")
            {
                tiles += ele.id + ",";
            }
        }
    
    }
    else
    {
        for(i = 0; i < _dropZone.childNodes.length; i++)
        {
            var ele = _dropZone.childNodes[i];
            if(ele.className == "item")
            {
                tiles += ele.id + ",";
            }
        }
    }
    
    if(tiles.length > 0)
    {
        tiles = tiles.substr(0, tiles.length - 1);
    }
    return tiles;
}

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

function reverseGradient()
{
	var tmp = new Array();
    for(i = 0; i < _dropZone.childNodes.length; i++)
    {
        var ele = _dropZone.childNodes[i];
        if(ele.className == "item")
        {
			tmp.push(ele);
		}
    }
    while(_dropZone.childNodes.length > 0)
    {
		_dropZone.removeChild(_dropZone.childNodes[0]);
    }
    for(i = tmp.length - 1; i >= 0; i--)
    {
		_dropZone.appendChild(tmp[i]);
    }
	
	getGradient();
}

function getGradient(pctData)
{
    var tiles = getGradientList();
    if(tiles == "")
    {
        alert("You must drag tiles to the gradient build area first.");
    }
    else
    {
        enableEmailButton(false);
        enableAdjustPct(false);
        document.title = "Creating gradient...";
        $get("doGradient").disabled = true;
        $get("doGradient").src = "images/gradientblendtool/btn_create_off.gif";
        $get("doReset").disabled = true;
        $get("doReset").src = "images/gradientblendtool/btn_reset_off.gif";
        $get("doReverse").disabled = true;
        $get("doReverse").src = "images/gradientblendtool/btn_reverse_grad_off.gif";
        closeMenu();
        
        var tileSizePrefix = document.getElementById("grTileSizePrefix").value;
        var groutWidth = parseInt(document.getElementById("grGroutWidth").value, 10);
        
        fixDimensions();
        
        var widFt = $get("grWidthFt").value;
        var widIn = $get("grWidthIn").value;
        var hgtFt = $get("grHeightFt").value;
        var hgtIn = $get("grHeightIn").value;
        if(pctData == undefined)
        {
			pctData = "";
        }
        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
            $get("grGroutColor").value, // grout ID
            $get("grColorMix").value, // mix level
            $get("grSymmetric").checked, // symmetric
            pctData, // percentage data, optional
            gradientDone);
        
        _loading = true; 
        startTimer();

    }
}

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

    document.title = "Loading gradient image...";

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

function gradientImageLoadComplete()
{
    clearTimer();
    _loading = false;
    
    $get("doGradient").disabled = false;
    $get("doGradient").src = "images/gradientblendtool/btn_create_on.gif";
    $get("doReset").disabled = false;
    $get("doReset").src = "images/gradientblendtool/btn_reset_on.gif";
    $get("doReverse").disabled = false;
    $get("doReverse").src = "images/gradientblendtool/btn_reverse_grad_on.gif";
    enableEmailButton(true);
    enableAdjustPct(true);
    
    document.title = _origTitle;
}

function enableAdjustPct(vl)
{
    $get("adjustPct").disabled = !vl;
    
    var imgSuf = "off";
    if(vl)
    {
        imgSuf = "on";
    }
    $get("adjustPct").src = "images/gradientblendtool/btn_adjust_" + imgSuf + ".gif";
}

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

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

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

function userPercentages()
{
    if($get("hidPctFields").innerHTML != "")
    {
        var html = $get("hidPctFields").innerHTML;
        $get("hidPctFields").innerHTML = "";
        $get("pctMenuContent").innerHTML = html;
    }
    
    $get("userPercentageMenu").style.display = "";
    location.href = "#menuTop";
    doModal();
    
    $get($get("firstPctFieldID").value).focus();
}

function closeMenu()
{
    $get("userPercentageMenu").style.display = "none";
    hideModal();
}

function doModal()
{
    var menuHeight = $get("userPercentageMenu").offsetHeight + 800;
    var contentHeight = $get("form1").offsetHeight + $get("form1").style.top;
    var windowHeight = window.screen.availHeight;

    var blockerHeight = menuHeight;
    blockerHeight = Math.max(blockerHeight, contentHeight);
    blockerHeight = Math.max(blockerHeight, windowHeight);

    $get("modalBlocker").style.width = "100%";
    $get("modalBlocker").style.height = blockerHeight + "px";
    $get("modalBlocker").style.display = "";
}

function hideModal()
{
    $get("modalBlocker").style.display = "none";
}

function applyPercentages()
{
    getGradient(getPercentages());
}

function getPercentages()
{
    var fields = document.getElementsByTagName("input");
    var result = "";
    var first = true;
    
    for(var i = 0; i < fields.length; i++)
    {
        if(fields[i].className == "pct")
        {
            if(!first)
            {
                result += ",";
            }
            first = false;
            result += fields[i].id.replace(/sPct~/, "") + "~" + fields[i].value;
        }
    }
    
    return result;
}

function heightChanged()
{
    enableAdjustPct(false);
}

function fixPct(o)
{
    var vl = parseInt(o.value, 10);
    if(isNaN(vl))
    {
        vl = 0;
    }

    if(vl < 0)
    {
        vl = 0;
    }
    else if (vl > 100)
    {
        vl = 100;
    }

    o.value = vl;
}

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;
        }
    }

}