// jako parametr element DOM <select>
var ColorPicker = function(domelement) {

    var m = new Menu();
    m.elementChange(domelement);
}

window.onload = function() {
    var selectElements = document.getElementsByTagName('select');
    for (var i = 0; i < selectElements.length; i++) {
        var selectElement = selectElements[i];

        if (selectElement.attributes["rel"] && selectElement.attributes["rel"].value == "colorpicker") {
            new ColorPicker(selectElement);
        }
    }
}

var Menu = function() {
    var elementSelect;
    var selectOptions;
    var glownyDiv;
    var divColor;
    var divText;
    var spanContainer;
    var spanColor;
    var aText;
    var divContainer;



    var addSpan = function() {

        spanContainer = document.createElement('span');
        spanContainer.className = "color-picker-spanContainer";
        spanContainer.style.width = elementSelect.style.width;

        if (elementSelect.style.height) {
            spanContainer.style.height = elementSelect.style.height;
        } else {
            spanContainer.style.height = "20px";
        }

        if (elementSelect.style.lineHeight) {
            spanContainer.style.lineHeight = elementSelect.style.lineHeight;
        } else {
            spanContainer.style.lineHeight = "20px";
        }
        spanContainer.style.margin = "0px";
        if (spanContainer.addEventListener) {
            spanContainer.addEventListener('click', onElementClick, false);
        } else {
            spanContainer.attachEvent("onclick", onElementClick);
        }
        divContainer = document.createElement("div");
        divContainer.className = "color-picker-main-container";
        elementSelect.parentNode.insertBefore(divContainer, elementSelect);
        divContainer.appendChild(spanContainer);

        spanColor = document.createElement('span');
        spanColor.innerHTML = "&nbsp&nbsp&nbsp&nbsp&nbsp";
        spanColor.className = "color-picker-spanColor";
        if (elementSelect.style.height) {
            spanColor.style.marginTop = ((parseInt(elementSelect.style.height) - 10) / 2 - 1).toString() + "px";
        } else {
            spanColor.style.marginTop = "4px";
        }
        spanColor.style.marginLeft = "4px";

        aText = document.createElement('a');
        aText.href = "#";
        aText.className = "color-picker-aText"

        for (var i = 0; i < selectOptions.length; i++) {

            if (selectOptions[i].selected) {
                aText.innerHTML = selectOptions[i].innerHTML + ' ';
                spanColor.style.backgroundColor = selectOptions[i].style.backgroundColor;


            }
        }


        //Dodajemy color i tekst jako dzieci do contenera span
        spanContainer.appendChild(spanColor);
        spanContainer.appendChild(aText);


        return spanContainer;

    }

    var addDiv = function() {

        //dodanie glownego diva do Selectu
        glownyDiv = document.createElement('div');
        glownyDiv.style.width = elementSelect.style.width;
        if (glownyDiv.style.top) {
            glownyDiv.style.top = elementSelect.style.height;
        } else {
            glownyDiv.style.top = "20px";
        }
        glownyDiv.style.left = "0px";
        glownyDiv.className = "color-picker-dropdown-div";


        if (glownyDiv.addEventListener) {

            glownyDiv.addEventListener("mouseup", menuOnMouseOut, false);
        } else {
            glownyDiv.attachEvent("onmouseup", menuOnMouseOut);
        }


        divContainer.appendChild(glownyDiv);

        divColor = document.createElement('div');
        for (var i = 0; i < selectOptions.length; i++) {

            var divpoziomy = document.createElement('div');
            divpoziomy.className = "color-picker-divpoziomy";
            divpoziomy.style.width = elementSelect.style.width;

            divColor = document.createElement('div');
            divColor.style.backgroundColor = selectOptions[i].style.backgroundColor;
            divColor.className = "color-picker-divcolor";
            divColor.style.width = "10px";
            divColor.style.height = "10px";


            divpoziomy.origValue = selectOptions[i].value;
            divpoziomy.style.lineHeight = divpoziomy.style.height;
            divpoziomy.appendChild(divColor);

            // div reprezentujcy tekst
            divText = document.createElement('div');
            divText = document.createElement('div');
            divText.innerHTML = selectOptions[i].innerHTML;
            divText.className = "color-picker-divtekst";


            divpoziomy.appendChild(divText);

            if (divpoziomy.addEventListener) {

                divpoziomy.addEventListener('click', onClickDiv, false);
                divpoziomy.addEventListener('blur', onclickDocument, false);
            } else {

                divpoziomy.attachEvent("onclick", onClickDiv);
            }

            glownyDiv.appendChild(divpoziomy);
            selectOptions[i].style.display = 'none';
        }

    }

    var eventBody = function() {

        if (document.addEventListener) {
            document.addEventListener('click', onclickDocument, false);

        } else {
            document.attachEvent("onclick", onclickDocument);
        }

    }

    var onclickDocument = function() {
        if (glownyDiv.style.display == 'block') {

            glownyDiv.style.display = 'none';
        }

    }

    var onElementClick = function(e) {
        if (e.preventDefault) {

            e.preventDefault();
        } else {

            e.returnValue = false;
        }

        if (e.stopPropagation) {

            e.stopPropagation();
        } else {

            window.event.cancelBubble = true;
        }

        if (glownyDiv.style.display == 'block') {

            glownyDiv.style.display = 'none';
        } else {

            glownyDiv.style.display = 'block';
        }
    }

    var menuOnMouseOut = function() {
        glownyDiv.style.display = 'none';
    }


    var onClickDiv = function(e) {
        var el;

        if (e.target) {

            el = e.target;
        } else {

            el = window.event.srcElement;
        }

        if (e.preventDefault) {

            e.preventDefault();
        } else {

            e.returnValue = false;
        }

        if (e.stopPropagation) {

            e.stopPropagation();
        } else {

            window.event.cancelBubble = true;
        }

        if (el.childNodes.length != 2) {

            el = el.parentNode;
        }

        spanColor.style.backgroundColor = el.childNodes[0].style.backgroundColor;
        aText.innerHTML = el.childNodes[1].innerHTML;


        elementSelect.value = el.origValue;

    }
    eventBody();

    return {
        elementChange: function(elementToChange) {
            elementSelect = elementToChange;
            selectOptions = elementSelect.getElementsByTagName('option');

            var spanContainer = addSpan();
            addDiv();
            elementSelect.style.display = 'none';


        }
    }

}