// JScript File
window.selectedIndex = 0;

function prepareList()
{
	if(!document.getElementsByTagName) return false;
    if(!document.getElementById) return false;
    if(!document.getElementById('reasonList')) return false;
    if(!document.getElementById('preview')) return false;
    
    var reasonList = document.getElementById('reasonList');
    var selectorItems = reasonList.getElementsByTagName('li');
    for(var i = 0; i < selectorItems.length; i++)
    {
        var listItem = selectorItems[i];
        
         Event.observe(listItem, 'mouseover',  function(){ highlight(this); });
         Event.observe(listItem, 'mouseout', function(){ unhighlight(this); });
         Event.observe(listItem, 'click', function() { select(this); });
    }

	var qs = new Querystring()
	if(typeof(qs.get('option')) !== 'undefined' && qs.get('option') !== null) {
		var v1 = qs.get("option");
		select(selectorItems[v1]);
		highlight(selectorItems[v1]);
	}
	
}

//Event.observe(window, 'load', function(){prepareList();});

function highlight(element)
{
    if(!element.hasClassName('selected'))
    {
        var imageDiv = findElementWithClassName(element, 'div', 'arrowHolder');
        if(imageDiv)
        {
            removeClass(imageDiv, 'elementUp');
            addClass(imageDiv, 'elementDown');
        }
        
        var imageWrapper = findElementWithClassName(element, 'div', 'img-wrapper');
        if(imageWrapper)
        {
            removeClass(imageWrapper, 'elementUp');
            addClass(imageWrapper, 'elementDown');
        }
        
        var optionBack = findElementWithClassName(element, 'div', 'optionBack');
        if(optionBack)
        {
            removeClass(optionBack, 'optionBackUp');
            addClass(optionBack, 'optionBackDown');
        }
        
        var radioButton = element.getElementsByTagName('input')[0];
        
        if(radioButton)
        {
            // if nothign selected, then set rolloverposition
            if(window.selectedIndex == 0)
                setRolloverPosition(radioButton.value);
        }
    }
        
}

function unhighlight(element)
{
    if(!element.hasClassName('selected'))
    {
        var imageDiv = findElementWithClassName(element, 'div', 'arrowHolder');
        if(imageDiv)
        {
            removeClass(imageDiv, 'elementDown');
            addClass(imageDiv, 'elementUp');
        }
        
        var imageWrapper = findElementWithClassName(element, 'div', 'img-wrapper');
        if(imageWrapper)
        {
            removeClass(imageWrapper, 'elementDown');
            addClass(imageWrapper, 'elementUp');
        }
        
        var optionBack = findElementWithClassName(element, 'div', 'optionBack');
        if(imageWrapper)
        {
            removeClass(optionBack, 'optionBackDown');
            addClass(optionBack, 'optionBackUp');
        }
    }
    
    setRolloverPosition(window.selectedIndex);
}

function select(element)
{
    var selectedRow = findSelectedRow('reasonList');
    if(selectedRow)
        unSelect(selectedRow);
    
    highlight(element);
    
    var radioButton = element.getElementsByTagName('input')[0];
    if(radioButton)
    {
        radioButton.checked = true;
        if(radioButton.focus)
            radioButton.focus();
    
        //setInputValue('reason', radioButton.value);
        
        // set selectedIndex to value so when unhighlight won't move the element
        window.selectedIndex = radioButton.value;
        setRolloverPosition(window.selectedIndex);
    }
    
    addClass(element, 'selected');
    
    var a = 5;    
}

function unSelect(element)
{
    removeClass(element, 'selected');
    unhighlight(element);
}

function findSelectedRow(listName)
{
    var selectedRow = null;
    var reasonList = document.getElementById(listName);
    if(reasonList)
    {
        selectedRow = findElementWithClassName(reasonList, 'li', 'selected');  
    }
    
    return selectedRow;
}


function setRolloverPosition(backgroundIndex)
{
    moveElement("preview", -(backgroundIndex * 394), 0);
}

function moveElement(elementId, finalX, finalY)
{
    if(!document.getElementById) return false;
    if(!document.getElementById(elementId)) return false;
    var elem = document.getElementById(elementId);
    elem.style.top = finalX + "px";
} 



function findElementWithClassName(parentElement, tagName, className)
{
    var targetChild = null;
    if(!parentElement.getElementsByTagName) return false;
    var children = parentElement.getElementsByTagName(tagName);
    if(children)
    {
        for(var i = 0; i < children.length; i++)
        {
            if(children[i].className)
                if(children[i].className.indexOf(className) != -1)
                    targetChild = children[i]; 
        }
    }
    
    return targetChild;
}

// wrappers for prototype methods
function addClass(element, className){
    if(!element) return false;
    if(!element.addClassName) return false;
    element.addClassName(className);
}

function removeClass(element, className){
    if(!element) return false;
    if(!element.removeClassName) return false;
    element.removeClassName(className);
}