function createHiddenInput(name){
    var hiddenValue = document.createElement('input');
    hiddenValue.setAttribute('type', 'hidden');
    hiddenValue.setAttribute('name', name);
    hiddenValue.setAttribute('value', 0);
    
    return hiddenValue;
}

function createLink(href, id, classname){
    var link = document.createElement('a');
    link.setAttribute('href', href);
    if (id) {
        link.setAttribute('id', id);
    }
    if (classname) {
        link.className = classname;
    }
    
    return link;
}

function createClassElem(tag, classname){
    var node = document.createElement(tag);
    node.className = classname;
    
    return node;
}

function createText(text){
    var node = document.createTextNode(text);
    return node;
}

function disableAllMenu(a, b){
    var nodeA = document.getElementById(a);
    var triggerA = nodeA.getElementsByTagName('a')[0];
    triggerA.setAttribute('rel', 'disable');
    triggerA.style.backgroundColor = "#DDDDDD";
    var nodeB = document.getElementById(b);
    var triggerB = nodeB.getElementsByTagName('a')[0];
    triggerB.setAttribute('rel', 'disable');
    triggerB.style.backgroundColor = "#DDDDDD";
}

function calculateBonusLune(input){
    var bounsLune = document.getElementById('bounsLune');
    if(input < 155) {
        bounsLune.innerHTML = '+ ' + input * 2;
    } else {
        bounsLune.innerHTML = '+ ' + ((input * 2) - 10);
    }
}

function createForm(element){
    if(!document.getElementById(element)) return false;
    var form = document.getElementById(element);
    
    if(!form.getElementsByTagName('select')[0]) return false;
    var select = form.getElementsByTagName('select')[0];
    
    var parent = select.parentNode;
    var selectName = select.getAttribute('name');
    var options = select.getElementsByTagName('option');
    
    select.style.display = "none";
    
    /* hidden value, sends value */
    var hiddenValue = createHiddenInput(selectName);
    parent.appendChild(hiddenValue);
    
    /* open dropdown */
    var trigger = createLink('#', null, 'trigger');
    trigger.setAttribute('rel', 'enable');
    parent.appendChild(trigger);
    
    /* cutomized select container */
    var selectContainer = createClassElem('div', 'customizedSelectContainer');
    parent.appendChild(selectContainer);
    
    /* cutomized select */
    var selectMenu = createClassElem('ul', 'customizedSelectMenuHidden');
    selectContainer.appendChild(selectMenu);
    
    for(var j = 0; j < options.length; j++) {
        var optionVal = options[j].getAttribute('value');
        var optionName = options[j].firstChild.nodeValue;
        var optionClass = options[j].className;
        
        if(!j || options[j].selected) {
            var triggerText = createText(optionName);
            trigger.innerHTML = optionName;
            hiddenValue.setAttribute('value', parseInt(optionName, 0));
            calculateBonusLune(parseInt(optionName, 0));
        }
        
        var listClass = (optionClass) ? optionClass : optionName;
        var list = createClassElem('li', listClass);
        
        var item = createLink(optionVal);
        item.appendChild(createText(optionName));
        
        list.appendChild(item);
        selectMenu.appendChild(list);
        
        item.hiddenValue = hiddenValue;
        item.trigger = trigger;
        item.menu = selectMenu;
        
        list.onmouseover = function(){
            this.style.backgroundColor = "#DDDDDD";
        };
        
        list.onmouseout = function(){
            this.style.backgroundColor = "#FFFFFF";
        };
        
        item.onclick = function(){
            
            var herf = this.getAttribute('href', 2);
            
            // Set hidden input as selected item
            var hiddenValue = this.hiddenValue;
            hiddenValue.setAttribute('value', parseInt(herf, 0));
            
            // Set trigger text as selected item
            this.trigger.firstChild.nodeValue = this.firstChild.nodeValue;
            
            calculateBonusLune(parseInt(herf, 0));
            
            // Close menu after clicked
            this.menu.className = "customizedSelectMenuHidden";
            
            return false;
        };
    }
    
    parent.menu = selectMenu;
    parent.onmouseout = function(e){
        if(this.hide) {
            clearTimeout(this.hide);
        }
        
        if (!e) var e = window.event;
        
        var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
        
        while (reltg.tagName != 'BODY'){
            if (reltg.className == this.className){
                return;
            }
            reltg = reltg.parentNode;
        }
        
        var menu = this.menu;
        
        this.hide = setTimeout(function(){
                                   menu.className = "customizedSelectMenuHidden";
                               }, 750);
    };
    
    trigger.menu = selectMenu;
    trigger.onclick = function(){
        var state = this.getAttribute('rel');
        if (state == 'enable') {
            if (this.menu.className != "customizedSelectMenuVisible") {
                this.menu.className = "customizedSelectMenuVisible";
            } else {
                this.menu.className = "customizedSelectMenuHidden";
            }
            
        }
        
        return false;
    };
    
    parent.removeChild(select);
}

createForm('taglio');