/*

    Element fade script, by Fredrik Mörk (www.alcedo.com)
    
*/

var _isIE = (navigator.appName == "Microsoft Internet Explorer");
var _timeoutHandles = null;

function fadeElement(elementId, from, to, classNameBase, increment)
{
    try 
    {   
    
        
        // fetch timeout handle for this element, in order to clear any
        // pending fade operation
        timeoutHandle = GetTimeoutHandle(elementId);
        if (timeoutHandle != null)
            clearTimeout(timeoutHandle);

        // get the target element
        var element = document.getElementById(elementId);
        
        // get current CSS classname from the element
        var currentName = GetClassName(element);
        
        // extract the trailing number part of the classname
        var currentNo = Number(currentName.substr(classNameBase.length));
        
        // make sure that there is a fade step to perform
        if ((increment > 0 && currentNo < to) || (increment < 0 && currentNo > to))
        {
            // increment the number
            currentNo += increment;
            
            // assign css class
            SetClassName(element, classNameBase + currentNo);
            
            // set timeout for next step
            SetTimeoutHandle(elementId,  setTimeout("fadeElement('" + elementId + "', " + from + ", " + to + ", '" + classNameBase + "', " + increment + ")", 60));
        }
    }
    catch (err)
    {
        window.alert(err.description);
    }        
}

function GetTimeoutHandle(id)
{
    var index = GetTimeoutHandleIndex(id);
    if (index >= 0)
        return _timeoutHandles[index][1];
        
    return null;
}

function GetTimeoutHandleIndex(id)
{
    if (_timeoutHandles != null)
    {
        for (var i = 0; i < _timeoutHandles.length; i++)
        {
            if (_timeoutHandles[i] != null)
            {
                if (_timeoutHandles[i][0] == id)
                {
                    return i;
                }
            }
        }
    }
    return -1;
}

function SetTimeoutHandle(id, handle)
{
    if (_timeoutHandles != null)
    {
        // get index for id
        var index = GetTimeoutHandleIndex(id);
        if (index >= 0)
        {
            // if index was found; update handle for that index
            _timeoutHandles[index][1] = handle;
            return;
        }   
    }
    else
    {
        _timeoutHandles = new Array(0);
    }
    // index was not found; create new element
    var newPair = Array(2);
    newPair[0] = id;
    newPair[1] = handle;
    
    // create temp array to store the element in...
    var newArray = new Array(1);
    newArray[0] = newPair;
    //...and concatenate the temp array with the real array
    _timeoutHandles.concat(newArray);
}
function SetInnerHtml(element, content)
{
    element.innerHTML = content;
}

function GetClassName(element)
{
    return element.className;
}

function SetClassName(element, name)
{
    if (_isIE)
        element.className = name;
    else
        element.setAttribute("class", name);
}

function loadImage()
{
    var image = document.getElementById('theImage');
    SetClassName(image, 'imageOpacity00');
    var imageId = document.getElementById('ImageID').value;
    if (_isIE)
        image.src = 'http://dev.alcedo.com/photography/photoloader.ashx?/' + imageId + '/thumbnail';
    else
        image.setAttribute("src", 'http://dev.alcedo.com/photography/photoloader.ashx?/' + imageId + '/thumbnail');
}

function imgReadyState()
{

    var image = document.getElementById('theImage');
    if (image.readyState == "complete")
        fadeElement('theImage', 0, 100, 'imageOpacity', 25);
}