var PotatoEffect = {
    SelectBox: function() {
        var v = {
            targetclassname: '',
            title: {
                defaultwidth: 75,
                classname: 'selectbox_title',
                focusclassname: 'selectbox_title_focus',
                innerhtml: '<strong></strong>',
                widthminus: 20
            },
            option: {
                classname: 'selectbox_option',
                innerhtml: '<div class="scroll"></div>',
                position: -1,
                upperposition: 1,
                zindex: 10,
                widthminus: 2,
                maxitems: 5,
                onclassname: 'on'
            }
        };
        var ua = navigator.userAgent;
        var isie = (/msie/i).test(ua);
        var isfirefox = (/firefox/i).test(ua);
        var isopera = (/opera/i).test(ua); var isapple = (/applewebkit/i).test(ua);

        if (!v.title.defaultwidth) { v.title.defaultwidth = 75; }
        if (!v.option.position) { v.option.position = -1; }
        if (!v.option.upperposition) { v.option.upperposition = 1; }
        if (!v.option.zindex) { v.option.zindex = 1; }
        var sels = document.getElementsByTagName('select');
        for (var i = 0, max = sels.length; i < max; i++) {
            if (!v.targetclassname || (v.targetclassname && (v.targetclassname == sels[i].className))) {
                if (!sels[i].ac) {
                    sels[i].ac = create(sels[i]);
                    sels[i].change = function() {
                        this.ac.ckdisable();
                        this.ac.tg.innerHTML = (this.options.length) ? this.options[this.selectedIndex].text : '';
                        this.ac.optionfocus();
                    };
                    sels[i].sf_change = sels[i].onchange;
                    sels[i].sf_mouseover = sels[i].onmouseover;
                    sels[i].sf_mouseout = sels[i].onmouseout;
                    sels[i].sf_click = sels[i].onclick;
                    sels[i].onchange = function() { this.change(); if (this.sf_change) { this.sf_change(); } }
                } else sels[i].reset();
            }
        }
        function create(selobj) {
            function rc(v, isoption) {
                if (!isoption) {
                    selobj.noww = getwidth();
                    var width = (v.widthminus) ? selobj.noww - v.widthminus : selobj.noww;
                    var tagname = 'span';
                    var style = 'width:' + width + 'px;vertical-align:middle;cursor:pointer;display:';
                    var disp = (selobj.style.display) ? selobj.style.display : (selobj.currentStyle) ? selobj.currentStyle['display'] : window.getComputedStyle(selobj, null)['display'];
                    if (disp == 'none') {
                        style += 'none';
                        selobj.style.display = 'none';
                    } else {
                        style += 'inline-block';
                    }
                } else {
                    var width = (v.widthminus) ? selobj.noww - v.widthminus : selobj.noww;
                    var tagname = 'div';
                    var style = 'position:absolute;width:' + width + 'px;display:none;z-index:' + v.zindex;
                    selobj.style.position = 'absolute'; selobj.style.left = '-100000px';
                }
                if (selobj.className) v.classname += ' ' + v.classname + '_' + selobj.className;
                if (isie) { var rv = document.createElement('<' + tagname + ' class="' + ((v.classname) ? v.classname : '') + '" style="' + style + '">'); }
                else {
                    var rv = document.createElement(tagname);
                    if (v.classname) {
                        rv.setAttribute('class', v.classname);
                    }
                    rv.setAttribute('style', style);
                }
                if (v.innerhtml) {
                    rv.innerHTML = v.innerhtml;
                    rv.tg = rv.childNodes[0];
                    for (var i = 0; i < 1; i++) {
                        if (isoption && rv.tg.className == 'scroll') rv.scrobj = rv.tg;
                        if (rv.tg.childNodes[0]) { rv.tg = rv.tg.childNodes[0]; i--; }
                    }
                } else {
                    rv.tg = rv;
                }
                return rv;
            }
            function getwidth() { var rv = (selobj.style.width) ? parseInt(selobj.style.width) : selobj.offsetWidth; if (!rv) { rv = parseInt((selobj.currentStyle) ? selobj.currentStyle['width'] : window.getComputedStyle(selobj, null)['width']); } if (!rv) rv = v.title.defaultwidth; return rv; }
            selobj.reset = function() { this.change(); this.style.height = 'auto'; var noww = getwidth(); if (noww != this.noww) { selobj.ac.style.width = (v.title.widthminus) ? (noww - v.title.widthminus) + 'px' : noww + 'px'; selobj.ac.opt.style.width = (v.option.widthminus) ? (noww - v.option.widthminus) + 'px' : noww + 'px'; selobj.noww = noww; } }
            selobj.show = function() { this.style.display = 'inline'; this.ac.style.display = 'inline-block'; this.reset(); }
            selobj.hide = function() { this.style.display = 'none'; this.ac.style.display = 'none'; }
            var ac = rc(v.title);
            if (selobj.length) { if (ac.tg) { ac.tg.innerHTML = selobj.options[selobj.selectedIndex].text; } else { ac.innerHTML = selobj.options[selobj.selectedIndex].text; } }
            ac.onclick = function() { if (selobj.disabled) return false; if (this.opt.style.display == 'block') { this.opt.style.display = 'none'; selobj.focus(); return false; } setoptions(); this.optionfocus(); this.opt.style.left = '-100000px'; this.opt.style.display = 'block'; if (this.opt.scrobj) { if (selobj.scroll) { var sto = this.opt.getElementsByTagName('li')[0]; this.opt.scrobj.style.height = sto.offsetHeight * v.option.maxitems + 'px'; this.opt.scrobj.scrollTop = sto.offsetHeight * selobj.selectedIndex; this.opt.scrobj.style.overflow = 'auto'; this.opt.scrobj.style.overflowX = 'hidden'; } else { this.opt.scrobj.style.height = 'auto'; this.opt.scrobj.style.overflow = 'hidden'; } } var pos = [0, 0]; for (var i = 0, cobj = this; !cobj.tagName.toLowerCase().match(/body|html/); cobj = cobj.offsetParent, i++) { pos[0] += cobj.offsetLeft; pos[1] += cobj.offsetTop; if (isie && !(/table|thead|tbody|tfoot|th/i).test(cobj.tagName) && i) { pos[0] += cobj.clientLeft; pos[1] += cobj.clientTop; } if (isapple && (/table|thead|tbody|tfoot|th|td/i).test(cobj.tagName)) { pos[0] += cobj.clientLeft; pos[1] += cobj.clientTop; } } var sch = (isapple) ? document.body.scrollTop : document.documentElement.scrollTop; var isupper = ((pos[1] + this.offsetHeight + this.opt.offsetHeight) > (document.documentElement.clientHeight + sch)); this.opt.style.left = pos[0] + 'px'; this.opt.style.top = (isupper) ? (pos[1] - this.opt.offsetHeight + v.option.upperposition) + 'px' : (pos[1] + this.offsetHeight + v.option.position) + 'px'; if (selobj.sf_click) selobj.sf_click(); return false; }
            ac.optionfocus = function(offall) { var opts = (this.opt.tg) ? ac.opt.tg.getElementsByTagName('a') : this.opt.getElementsByTagName('a'); for (var i = 0, max = opts.length; i < max; i++) opts[i].className = (offall) ? '' : (i == selobj.selectedIndex) ? v.option.onclassname : ''; }
            ac.ckdisable = function() { var opacity = (selobj.disabled) ? 50 : 100; if (isie) { ac.style.filter = 'alpha(opacity=' + opacity + ')'; } else { ac.style.opacity = opacity / 100; } }
            ac.ckdisable();
            ac.opt = rc(v.option, true);
            ac.focusing = function() { if (!selobj.disabled) { this.className += ' ' + v.title.focusclassname; if (isie) { this.onmousewheel = wheelaction; } else { this.addEventListener(((isfirefox) ? 'DOMMouseScroll' : 'mousewheel'), wheelaction, false); } } }
            ac.bluring = function() { if (!selobj.disabled) { this.className = this.className.replace(new RegExp(' ' + v.title.focusclassname, 'g'), ''); if (isie) { this.onmousewheel = null; } else { this.removeEventListener(((isfirefox) ? 'DOMMouseScroll' : 'mousewheel'), wheelaction, false); } } }
            selobj.onfocus = function() { ac.focusing(); }
            selobj.onblur = function() { ac.bluring(); }
            if (!isie && !isopera) { selobj.onkeydown = function(e) { var kc = e.keyCode; if (kc == 38) { setselected('up'); return false; } else if (kc == 40) { setselected('down'); return false; } } }
            function setoptions() { var max = selobj.options.length; selobj.scroll = (v.option.maxitems && (max > v.option.maxitems)); var inhtml = '<ul>'; for (var i = 0; i < max; i++) { inhtml += '<li><a href="#">' + selobj.options[i].text + '</a></li>'; } inhtml += '</ul>'; if (ac.opt.tg) { ac.opt.tg.innerHTML = inhtml; var opts = ac.opt.tg.getElementsByTagName('a'); } else { ac.opt.innerHTML = inhtml; var opts = ac.opt.getElementsByTagName('a'); } for (var i = 0, max = opts.length; i < max; i++) { opts[i].i = i; opts[i].onclick = function() { ac.opt.style.display = 'none'; ac.tg.innerHTML = selobj.options[this.i].text; selobj.options[this.i].selected = 'selected'; selobj.onchange(); selobj.focus(); return false; } } }
            function setselected(f) { if (f == 'up' && selobj.selectedIndex > 0) { selobj.options[selobj.selectedIndex - 1].selected = 'selected'; changed = true; } else if (f == 'down' && selobj.selectedIndex < (selobj.options.length - 1)) { selobj.options[selobj.selectedIndex + 1].selected = 'selected'; changed = true; } if (changed && ac.opt.scrobj && selobj.scroll) { var sto = ac.opt.getElementsByTagName('li')[0]; ac.opt.scrobj.scrollTop = sto.offsetHeight * selobj.selectedIndex; } selobj.onchange(); }
            function wheelaction(e) { if (isie) { e = window.event; } if (selobj.options.length > 1) { var wv = (e.wheelDelta) ? e.wheelDelta : e.detail; wv = (isfirefox) ? (wv < 0) ? 'up' : 'down' : (wv > 0) ? 'up' : 'down'; setselected(wv); } if (e.preventDefault) { e.preventDefault(); } return false; }
            var optclosetimer = null;
            ac.onmouseover = function(e) { clearTimeout(optclosetimer); if (selobj.sf_mouseover) { if (!e) { e = window.event; } if (checkevents(e, this)) { selobj.sf_mouseover(); } } }
            ac.onmouseout = function(e) { optclosetimer = setTimeout(optclose, 100); if (selobj.sf_mouseout) { if (!e) { e = window.event; } if (checkevents(e, this)) { selobj.sf_mouseout(); } } }
            ac.opt.onmouseover = function() { clearTimeout(optclosetimer); }
            ac.opt.onmouseout = function() { optclosetimer = setTimeout(optclose, 100); }
            function optclose() { if (ac.opt.style.display == 'block') { ac.opt.style.display = 'none'; selobj.focus(); } }
            function checkevents(e, tg) { var etg = (e.target) ? e.target : e.srcElement; if (etg != tg) { return false; } var ereltg = (e.relatedTarget) ? e.relatedTarget : (e.type == 'mouseover') ? e.fromElement : e.toElement; if (ereltg) { while (ereltg != tg && !ereltg.tagName.match(/(body|html)/i)) { ereltg = ereltg.parentNode; } if (ereltg == tg) { return false; } } return true; }
            selobj.parentNode.insertBefore(ac, selobj); document.body.appendChild(ac.opt);
            return ac;
        }
    },
    UI: function() {
        var frm = document.getElementsByTagName("form");
        for (var i = 0; i < frm.length; i++) {
            new MyCheckBoxes(frm[i]);
            new MyRadioButtons(frm[i]);
        }
    }

};

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*
Function.prototype.bind = function(object) {
    var _method = this;
    return function() {
        _method.apply(object, arguments);
    }
}
*/
//------------------------------------------------------------------
//	MyCheckBox
//------------------------------------------------------------------
function MyCheckBoxes(oForm) {
    if (!oForm)
        return;
    this.checkboxes = [];
    this.limit = 0;
    this.form = oForm;
    var elems = oForm.elements;
    if (elems.length == 0)
        return;
    for (var i = 0; i < elems.length; i++) {
        if (elems[i].type) {
            if (elems[i].type.toLowerCase() == 'checkbox') {
                var mycheckbox = new MyCheckBox(elems[i], this);
                this.addCheckbox(mycheckbox);
            }
        }
    }
}

MyCheckBoxes.prototype = {
    addCheckbox: function(o) {
        this.checkboxes.push(o);
    },
    setLimit: function(nLimit) {
        this.limit = nLimit;
    },
    onClicked: function(oCheckbox) {
        var nChecked = 0;
        if (this.limit) {
            var els = this.form.elements;
            for (var i = 0; i < els.length; i++) {
                var el = els[i];
                if (el.type == 'checkbox' && el.checked) {
                    nChecked++;
                    if (nChecked > this.limit) {
                        alert(this.limit + "개 까지만 선택할 수 있습니다");
                        oCheckbox.onImgCheckBoxClick();
                    }
                }
            }
        }
    },
    toggle: function() {
        if (this.toggled == false)
            this.checkall();
        else
            this.uncheckall();
        this.toggled = !this.toggled;

    },
    checkall: function() {
        for (var i = 0; i < this.checkboxes.length; i++)
            this.checkboxes[i].check();
    },
    uncheckall: function() {
        for (var i = 0; i < this.checkboxes.length; i++)
            this.checkboxes[i].uncheck();
    },
    invertall: function() {
        for (var i = 0; i < this.checkboxes.length; i++)
            this.checkboxes[i].invert();
    }
}


function MyCheckBox(oCheck, oListener) {
    this.value = null;
    this.imgCheckbox = null;
    this.checkbox = null;
    this.listener = null;
    this.func = null;
    this.resources = {
        normal: '/ui/input_check_off.gif',
        checked: '/ui/input_check_on.gif'
    };
    this.styles = {
        width: '13px',
        height: '13px',
        border: '0px',
        cursor: 'hand',
        margin: '2px 4px 2px 0px',
        verticalAlign: 'middle'
    }
    this.bind(oCheck);
    if (oListener)
        this.listener = oListener;
}


MyCheckBox.prototype = {
    bind: function(oCheck) {
        if (!oCheck.form)
            return;
        this.checkbox = oCheck;
        this.value = oCheck.value;
        this.func = this.checkbox.onclick;
        this.checkbox.onclick = this.onCheckBoxClick.bind(this);
        this.generate();
    },
    check: function() {
        this.checkbox.checked = true;
        this.syncImgCheckbox();
    },
    uncheck: function() {
        this.checkbox.checked = false;
        this.syncImgCheckbox();
    },
    invert: function() {
        this.checkbox.checked = !this.checkbox.checked;
        this.syncImgCheckbox();
    },
    applyStyles: function(o, styles) {
        for (var prop in styles)
            o.style[prop] = styles[prop];
    },
    generate: function() {
        var oImg = this.checkbox.parentNode.insertBefore(document.createElement('img'), this.checkbox);
        this.applyStyles(oImg, this.styles);
        this.imgCheckbox = oImg;
        this.checkbox.style.position = "absolute";
        this.checkbox.style.left = "-10000px";
        oImg.onclick = this.onImgCheckBoxClick.bind(this);
        this.syncImgCheckbox();
    },
    syncImgCheckbox: function() {
        this.imgCheckbox.src = this.isChecked() ? this.resources.checked : this.resources.normal;
    },
    isChecked: function() {
        return this.checkbox.checked;
    },
    onCheckBoxClick: function() {
        this.syncImgCheckbox();
        if (this.func)
            this.func();
        if (this.listener)
            this.listener.onClicked(this);
    },
    onImgCheckBoxClick: function() {
        this.checkbox.checked = !this.checkbox.checked;
        this.onCheckBoxClick();
    }
}






//------------------------------------------------------------------
// MyRadioButton	
//------------------------------------------------------------------
function MyRadioButtons(oForm) {
    if (!oForm)
        return;
    this.radiobuttons = [];
    this.form = oForm;
    var elems = oForm.elements;
    if (elems.length == 0)
        return;
    this.tmp = [];
    for (var i = 0; i < elems.length; i++) {
        if (elems[i].type) {
            if (elems[i].type.toLowerCase() == 'radio') {
                var name = elems[i].name;
                if (!this.tmp[name]) {
                    this.tmp[name] = [];
                }
                this.tmp[name].push(elems[i]);
            }
        }
    }
    for (var i in this.tmp) {
        var myradiobutton = new MyRadioButton(this.tmp[i], this);
        this.addRadioButton(myradiobutton);
    }

}

MyRadioButtons.prototype = {
    addRadioButton: function(o) {
        this.radiobuttons.push(o);
    }
}



function MyRadioButton(oRadios, oListener) {
    this.prev = null;
    this.funcs = [];
    this.imgbuttons = [];
    this.radiobuttons = [];
    this.listner = null;
    this.resources = {
        normal: '/ui/input_radio_off.gif',
        checked: '/ui/input_radio_on.gif'
    };
    this.styles = {
        width: '13px',
        height: '13px',
        border: '0px',
        cursor: 'pointer',
        margin: '0px 4px 4px 0px',
        verticalAlign: 'middle'
    }
    if (oListener)
        this.listener = oListener;
    this.bind(oRadios);
}


MyRadioButton.prototype = {
    bind: function(oRadios) {

        for (var i = 0; i < oRadios.length; i++) {
            var oRadio = oRadios[i];
            if (oRadio) {
                var oImg = oRadio.parentNode.insertBefore(document.createElement('img'), oRadio);
                oImg.src = oRadio.checked ? this.resources.checked : this.resources.normal;
                this.applyStyles(oImg, this.styles);

                oRadio._index = i;
                oImg._index = i;

                if (oRadio.checked)
                    this.prev = oImg;

                this.radiobuttons[i] = this.imgbuttons[i] = { radiobutton: oRadio, imgbutton: oImg, value: oRadio.value };

                oRadio.listener = this;
                oImg.listener = this;


                this.funcs[i] = oRadio.onclick;

                oRadio.onclick = this.onRadioButtonClick;
                oImg.onclick = this.onImgButtonClick;

                oRadio.style.position = "absolute";
                oRadio.style.left = "-10000px";
            }
        }

        return;
    },
    applyStyles: function(o, styles) {
        for (var prop in styles)
            o.style[prop] = styles[prop];
    },
    isChecked: function(nIndex) {
        return this.imgbuttons[nIndex].radiobutton.checked;

    },
    resetPrev: function() {
        if (this.prev)
            this.prev.src = this.resources.normal;
    },
    changeImg: function(oImg, bChecked) {
        this.resetPrev();
        oImg.src = bChecked ? this.resources.checked : this.resources.normal;
        this.prev = oImg;
    },
    onRadioButtonClick: function() {
        if (this.listener.funcs[this._index])
            this.listener.funcs[this._index]();
        var oImg = this.listener.radiobuttons[this._index].imgbutton;
        this.listener.changeImg(oImg, this.listener.isChecked(this._index));
    },
    onImgButtonClick: function() {
        if (this.listener.imgbuttons[this._index].radiobutton.checked)
            return;

        if (this.listener.funcs[this._index])
            this.listener.funcs[this._index]();

        this.listener.imgbuttons[this._index].radiobutton.checked = !this.listener.imgbuttons[this._index].radiobutton.checked;
        this.listener.changeImg(this, this.listener.isChecked(this._index));
    }
}