var customControls = {
    obj: 'customControls',
    origs: new Array(),

    init: function(type, options)
    {
        if (type == 'checkbox') {
            this.initCheckbox(options);
        }

        if (type == 'select') {
            this.initSelect(options);
        }
    },

    getPosition: function(element)
    {
        var x = 0;
        var y = 0;
        var oe = element; 
        
        while ( element != null ) {
            x += element.offsetLeft;
            element = element.offsetParent;
        }
        
        element = oe;

        while ( element != null ) {
            y += element.offsetTop;
            element = element.offsetParent;
        }
        
        return { left: x, top: y };
    },
    
    initCheckbox: function (options)
    {
        var inps = document.getElementsByTagName('input');
        
        for (var i = 0; i < inps.length; i++) {
            if ((inps[i].type == 'checkbox')||(inps[i].type == 'radio')) {
                if (inps[i].id=='') {
                    inps[i].id = 'checkbox_' + i + '_original';
                }

                inps[i].style.width = options.width + 'px';
                inps[i].style.height = options.height + 'px';
                        
                var div = document.createElement('div');
                div.style.display = 'inline';
                div.style.width = options.width;
                div.style.height = options.height;
                div.id = 'checkbox_' + i + '_styled';
                
                var indiv = document.createElement('div');
                indiv.style.display = 'block';
                indiv.style.width = options.width + 'px';
                indiv.style.height = options.height + 'px';
                indiv.style.overflow = 'hidden';
                indiv.style.backgroundImage = 'url('+options.src+')';
                indiv.style.cursor = 'pointer';
                indiv.style.position = 'absolute';
                
                var pos = this.getPosition(inps[i]); 
                indiv.style.left = pos.left + 'px';
                indiv.style.top = pos.top + 'px';

                //indiv.style.marginLeft = (inps[i].offsetLeft - inps[i].style.paddingLeft) + 'px';
                //indiv.style.marginTop = inps[i].offsetTop + 'px'; 
                
                indiv.id = 'checkbox_' + i + '_styled_ex';
                
                this.origs[inps[i].id] = indiv.id; 
                
                if (inps[i].checked) {
                    indiv.style.backgroundPosition = '-' + options.width + 'px 0';
                }
           
                var fnc = this.obj + '.checkboxClick(\'' + inps[i].id + '\', \'' + indiv.id + '\', ' + options.width + ');';
                indiv.setAttribute('onclick', fnc);
                var evl = 'indiv.onclick = function () { ' + fnc + ' }';
                eval(evl);

                inps[i].parentNode.insertBefore(indiv, inps[i].parentNode.firstChild);
            }
        }
    },
    
    checkboxClick: function (original, styled, width)
    {
        original = document.getElementById(original);
        styled = document.getElementById(styled);
        if ((!original)||(!styled)) {
            alert('Form control could not been found!');
            return;
        }
        
        if (original.type=='checkbox') {
            if (original.checked) {
                original.checked = false;
                styled.style.backgroundPosition = '0px 0';
            } else {
                original.checked = true;
                styled.style.backgroundPosition = '-'+width+'px 0';
            }
        }

        if (original.type=='radio') {
            if (!original.checked) {
                original.checked = true;
                styled.style.backgroundPosition = '-'+width+'px 0';
                var objs = document.getElementsByTagName('input');
                for (var i = 0; i < objs.length; i++) {
                    if ((objs[i].type=='radio')&&(objs[i].name==original.name)) {
                        //alert(objs[i].name);
                        if (!objs[i].checked) {
                            var st = document.getElementById(this.origs[objs[i].id]);
                            st.style.backgroundPosition = '0 0';
                        }
                    }
                }
            }
        }
    },
    
    initSelect: function (options)
    {
        var inps = document.getElementsByTagName('select');
        
        for (var i = 0; i < inps.length; i++) {
            inps[i].style.height = options.height + 'px';

            // base
            var base = document.createElement('div');
            base.id = 'select_' + i + '_base';
            base.style.display = 'block';
            base.style.height = options.height + 'px';
            base.style.overflow = 'hidden';
            base.style.width = inps[i].offsetWidth + 'px';
            base.style.backgroundImage = 'url('+options.src+')';
            base.style.backgroundPosition = '0 -' + options.height + 'px';
            base.style.backgroundRepeat = 'repeat-x';
            base.style.position = 'absolute';
            var pos = this.getPosition(inps[i]); 
            base.style.left = pos.left + 'px';
            base.style.top = pos.top + 'px';
            base.style.zIndex = 10;

            // left corner
            var left = document.createElement('div');
            left.id = 'select_' + i + '_left';
            left.style.display = 'block';
            left.style.height = options.height + 'px';
            left.style.width = inps[i].offsetWidth + 'px';
            left.style.backgroundImage = 'url('+options.src+')';
            left.style.backgroundPosition = 'left 0';
            left.style.backgroundRepeat = 'no-repeat';
            base.appendChild(left);

            // button
            var butt = document.createElement('div');
            butt.id = 'select_' + i + '_button';
            butt.style.display = 'block';
            butt.style.height = options.height + 'px';
            butt.style.width = inps[i].offsetWidth + 'px';
            butt.style.backgroundImage = 'url('+options.src+')';
            butt.style.backgroundPosition = 'right -' + (options.height * 2) + 'px';
            butt.style.backgroundRepeat = 'no-repeat';
            butt.style.cursor = 'pointer';
            butt.setAttribute('onclick', 'customControls.showSelect(\''+inps[i].id+'\', \'select_' + i + '\')');
            left.appendChild(butt);
                        
            // text
            var text = document.createElement('div');
            text.id = 'select_' + i + '_text';
            text.style.display = 'inline';
            text.style.lineHeight = options.height + 'px';
            text.innerHTML = '';
            text.style.paddingLeft = '5px';
            butt.appendChild(text);

            // opts
            var opts = document.createElement('div');
            opts.id = 'select_' + i + '_options';
            opts.style.height = '100px';
            opts.style.width = inps[i].offsetWidth + 'px';
            opts.style.backgroundColor = '#FFF';
            opts.innerHTML = 'PIKA!';
            
            base.appendChild(opts);

            // options
            var opt = inps[i].getElementsByTagName('option');
            for (var l = 0; l < opt.length; l++) {
                if (opt[l].getAttribute('value')==inps[i].value) {
                    text.innerHTML = opt[l].innerHTML; 
                }
            }

            // insert into document
            inps[i].parentNode.insertBefore(base, inps[i].parentNode.firstChild);
        }
    },
    
    showSelect: function (select, baseid)
    {
        select = document.getElementById(select);
        var base = document.getElementById(baseid + '_base');
        base.style.height = '100px';
    },
    
    reposition: function ()
    {
        var objs = document.getElementsByTagName('input');
        for (var i=0; i<objs.length; i++) {
            if ((objs[i].type=='checkbox')||(objs[i].type=='radio')) {
                if (this.origs[objs[i].id]) {
                    var pos = this.getPosition(objs[i]);
                    var base = document.getElementById(this.origs[objs[i].id]); 
                    base.style.left = pos.left + 'px';
                    base.style.top = pos.top + 'px';
                }
            }
        }
    }
}