/*
    CNSDEV StylishControls (zen_stylishControls.js)
    *************************************************
    Triggers during page OnLoad and converts controls
    that are marked for conversation with a css class
    that starts on "stylish".
    
    Dependancy:
    This script requires "zenCore.js" to function.
*/

/* Register global events. */
globalOnLoad.AddEvent(generateStylishControls);
globalOnClick.AddEvent(registerPageClick);

function generateStylishControls() {
    if (document.all) return false; // Don't bother with IE and the likes..
    
    for (var i = 0; i < document.forms[0].elements.length; i++) {
        var element = document.forms[0].elements[i];
        
        var isStylish = false;
        if (element.className.substring(0, 7) == "stylish")
            isStylish = true;
        
        if (isStylish != true && element.parentNode != undefined)
            if (element.parentNode.className.substring(0, 7) == "stylish")
                isStylish = true;
        
        if (isStylish != true && element.parentNode.parentNode.parentNode.parentNode != undefined)
            if (element.parentNode.parentNode.parentNode.parentNode.className.substring(0, 7) == "stylish")
                isStylish = true;
                    
        if (isStylish)
        {
            switch (element.tagName.toLowerCase()) 
            {
                case "input":
                    switch (element.type) {
                        case "checkbox":
                            // ASP.NET Checkbox wraps checkbox in span to apply class. Also allows styling of CheckBoxList
                            fixASPNET(element);
                            MakeCheckBoxStylish(element);
                            break;
                        case "radio":
                            // ASP.NET Checkbox wraps radiobutton in span to apply class. Also allows stylish of RadioButtonList
                            fixASPNET(element);
                            MakeRadioStylish(element);
                            break;
                        case "file":
                            MakeFileUploadStylish(element);
                            break;
                    }
                    break;
                case "select":
                    MakeDropDownStylish(element);
                    break;
                case "table":
                    alert(FindChildByType(element, "input").tagName);
                    break;
            }
        }
    }
}

function fixASPNET(element) {
    if (element.className == "")
        if (element.parentNode.className != "") {
            element.className = element.parentNode.className;
            element.parentNode.className = null;
    }
    else if (element.parentNode.parentNode.parentNode.parentNode.className != "") {
        element.className = element.parentNode.parentNode.parentNode.parentNode.className;
    }
    if (element.title == "")
        if (element.parentNode.title != "") {
            element.title = element.parentNode.title;
            element.parentNode.title = "";
    }
}

function getBackgroundPosition(obj) {
    if (obj != undefined) {
        if (obj.currentStyle)
            return obj.currentStyle.backgroundPositionX;
        if (document.defaultView)
            return document.defaultView.getComputedStyle(obj, "").getPropertyValue("background-position");
        return "0px";
    }
}

function registerPageClick() {
    if (lastOpen != undefined) {
        if (lastOpen.style.display == "block")
            DropDownClick(lastOpen);
    }
}

var lastOpen;
/*
    Stylish Control: DROPDOWN
    *************************
    Dropdown lists just looks like crap, running this script
    will surely make you want to marry them!
    
    DropDownClick(object)
        - Reveals and hides dropdown content.
        
    DropDownSelect(object, value)
        - Selects a dropdown item.
*/
function DropDownClick(optionContainer)
{
    obj = optionContainer.parentNode;
    if (obj != undefined && optionContainer != null)
    {
        ToggleDisplayAuto(optionContainer);
        if (optionContainer.style.display == "block") {
            obj.style.backgroundPosition = getBackgroundPosition(obj).split(" ", 1) + " bottom";
            obj.style.zIndex = 99;
        }
        else {
            obj.style.backgroundPosition = getBackgroundPosition(obj).split(" ", 1) + " top";
            obj.style.zIndex = 3;
        }
        
        if (lastOpen != undefined)
        {
            if (lastOpen.style.display == "block" && lastOpen != optionContainer)
            {
                DropDownClick(lastOpen);
            }
        }
        lastOpen = optionContainer;
    }
}

function DropDownSelect(self, selected, select)
{
    if (self != undefined && select != undefined && selected != undefined)
    {
        var selectedValue = selected.id;
        self.innerHTML = selected.innerHTML;
        
        select.selectedIndex = -1;
        for (var i=0; i < select.options.length; i++) {
            if ((select.id + select.options[i].value) == selectedValue) {
                select.selectedIndex = i;
                return;
            }
        }
    }
}

function MakeDropDownStylish(select) {
    if (select != undefined && select.options.length > 0) {
        var stylishDropDown = document.createElement("a");
        stylishDropDown.href = "javascript:";
        stylishDropDown.className = select.className + " stylish";
        select.parentNode.insertBefore(stylishDropDown, select);

        var stylishOptionSelection = document.createElement("span");
        stylishOptionSelection.className = "optionSelected";
        if (select.selectedIndex != undefined)
            stylishOptionSelection.innerHTML = select.options[select.selectedIndex].text;

        var stylishOptionContainer = document.createElement("span");
        stylishOptionContainer.className = "optionContainer";

        stylishDropDown.onclick = function(evt) { cancelEventBubbling(evt); DropDownClick(stylishOptionContainer); };
        stylishDropDown.onmousedown = function() { return false; };

        stylishDropDown.appendChild(stylishOptionSelection);
        stylishDropDown.appendChild(stylishOptionContainer);

        select.className = "invisible";
        for (var i = 0; i < select.options.length; i++) {
            var stylishOption = document.createElement("span");
            stylishOption.id = select.id + select.options[i].value;
            stylishOption.innerHTML = select.options[i].text;
            stylishOption.onclick = function() { DropDownSelect(stylishOptionSelection, this, select); };
            stylishOptionContainer.appendChild(stylishOption);
        }

        if (select.style.width == "")
            stylishDropDown.style.width = stylishOptionContainer.offsetWidth + "px";
        else {
            stylishDropDown.style.width = select.style.width;
            stylishOptionContainer.style.width = select.style.width;
        }
        stylishOptionContainer.style.display = "none";
    }
    else
        select.className = null;
}


/*
    Stylish Control: CHECKBOX
    *************************
    Checkboxes are even worse than dropdowns, only a mother
    can love standard checkboxes but with this script the
    checkbox will be the most popular kid in town.

    MakeCheckBoxStylish(checkbox)
        - Load in the checkbox that needs an overhauling. It'll look pretty!
        ** Use global variable: checkboxStyle to set style. (Offset in image file).
           
    ToggleCheckbox(image, id, style)
        - Makes sure that you can see if a checkbox is
          checked or not.
*/

var checkboxStyle = 0;
function MakeCheckBoxStylish(checkbox) {
    if (checkbox != undefined) {
        var stylishCheckBox = document.createElement("a");
        //stylishCheckBox.href = "javascript:";
        stylishCheckBox.className = checkbox.className + " stylish";
        stylishCheckBox.style.backgroundPosition = getBackgroundPosition(checkbox).split(" ",1) + ((checkbox.checked) ? " bottom" : " top");
        //        stylishCheckBox.onclick = function() { ToggleCheckBox(this, checkbox); if (checkbox.onclick != undefined) setTimeout(checkbox.onclick, 0); };
        stylishCheckBox.onclick = function() { checkbox.click(); };

        var boxEvent = checkbox.onclick;
        
        if (checkbox.addEventListener)
            checkbox.addEventListener("click", function() { ToggleCheckBox(stylishCheckBox, checkbox); }, true);
        else checkbox.attachEvent("click", function() { ToggleCheckBox(stylishCheckBox, checkbox); }, true);

        if (checkbox.title != "") {
            stylishCheckBox.onmouseover = function() { DisplayToolTip(this, null, checkbox.title, true); };
            stylishCheckBox.onmouseout = function() { DisplayToolTip(this, null, null, false); };
        }

        checkbox.className = "invisible";
        checkbox.parentNode.insertBefore(stylishCheckBox, checkbox);    
    }
}

function ToggleCheckBox(self, checkbox) {
    checkbox = GetObject(checkbox);

    if (self != undefined && checkbox != undefined) {
        style = self.style.backgroundPosition.split(" ", 1);

        if (checkbox.checked == false) {
            //checkbox.checked = false;
            self.style.backgroundPosition = style + " top";
        }
        else {
            //checkbox.checked = true;
            self.style.backgroundPosition = style + " bottom";
        }
    }
}

function MakeFileUploadStylish(fileupload) {
    if (fileupload != undefined) {
        var stylishFileUpload = document.createElement("span");
        stylishFileUpload.className = fileupload.className;

        var fakeFileUpload = document.createElement("span");
        var selectedFile = document.createElement("p");

        selectedFile.innerHTML = "Select a file to upload";

        if (fileupload.value != "")
            selectedFile.innerHTML = fileupload.value;

        fileupload.onchange = function() { selectedFile.innerHTML = fileupload.value; };
        fileupload.onmouseover = function() { fakeFileUpload.style.backgroundColor = "#515151"; };
        fileupload.onmouseout = function() { fakeFileUpload.style.backgroundColor = "#414141"; };
        fakeFileUpload.appendChild(selectedFile);
        
        
        stylishFileUpload.appendChild(fakeFileUpload);
        stylishFileUpload.style.width = fileupload.offsetWidth-26 + "px";
        fileupload.parentNode.insertBefore(stylishFileUpload, fileupload);

        SetOpacity(fileupload, 0);
    }
}

/*
Stylish Control: RADIO
*************************
Radiobuttons look really dull, you can't color them just like the textboes,
using this script you can choose between a variety of styles! YAY! Colorful!
    
MakeRadioStylish(radio)
- Converts a radiobutton into a stylish radiobutton.
    
SelectRadio(self, radio)
- Ticks a radiobutton and makes sure the other members of the group are unticked.
*/

function MakeRadioStylish(radio) {
    if (radio != undefined) {
        var stylishRadio = document.createElement("span");
        stylishRadio.className = radio.className;
        stylishRadio.style.backgroundPosition = getBackgroundPosition(radio).split(" ", 1) + ((radio.checked) ? " bottom" : " top");
        //stylishRadio.addEventListener("click", function() { if (!radio.checked) SelectRadio(this, radio); else return false; radio.click(); }, true);
        radio.addEventListener("click", function() { SelectRadio(stylishRadio, radio) }, true);
        stylishRadio.onclick = function() { radio.click(); };

        radio.className = "invisible";
        radio.parentNode.insertBefore(stylishRadio, radio);

        if (radio.title != "") {
            var label = document.createElement("span");
            label.className = "radioLabel"
            label.innerHTML = radio.title;
            label.addEventListener("click", function() { if (!radio.checked) SelectRadio(stylishRadio, radio); else return false; radio.click(); }, true);
            radio.parentNode.insertBefore(label, radio);
        }
    }
}

function SelectRadio(self, radio) {
    radio = GetObject(radio);
    if (self != undefined && radio != undefined) {
        radio.checked = true;
        self.style.backgroundPosition = getBackgroundPosition(self).split(" ", 1) + " bottom";

        var elements = document.getElementsByTagName("input");
        for (var i = 0; elements[i] != undefined; i++) {
            if (elements[i] != radio) {
                if (elements[i].type == "radio") {
                    if (elements[i].name == radio.name) {
                        var skip = (elements[i].title != "") ? 1 : 0;
                        stylishRadio = GetPreviousByType(elements[i], "span", skip);
                        if (stylishRadio != null) {
                            stylishRadio.style.backgroundPosition = getBackgroundPosition(stylishRadio).split(" ", 1) + " top";
                        }
                    }
                }
            }
        }
    }
}