/**
* create category widget
*
* @param target       {iwapiObject} default value is body.
* @param selected     {Array}      the options show in left box.
* @param data         {JSON}       the data of category widget.
* @param optionName   {String}     option name which will be submit by post method.
* @param space        {Int}        center space which around add&delete button.
* @param width        {Int}        widget width.
* @param height       {Int}        widget height.
* @param boxCss       {String}
* @param areaCss      {String}
* @param leftAreaCss  {String}
* @param rightAreaCss {String} 
* @param norOptionCss {String}
* @param curOptionCss {String}
* @param btnCss       {String}
* @param addBtnCss    {String}
* @param deleteBtnCss {String}
* @param addBtnText   {String}
* @param deleteBtnText{String}
*
*/
var categoryOptions = function(params){
    this.options = {
        target:iwapi("body"),
        selected:[],
        data:{},
        optionName:"categoryId[]",
        
        space:20,
        width:600,
        height:360,
        
        boxCss:"",
        
        areaCss:"height:100%; overflow:auto; border:1px solid #E9ECF5; border-radius:5px; box-shadow:#ffffff 0 0 1px; -moz-border-radius:5px; -moz-box-shadow:#EFEFEF 0 0 5px; -webkit-border-radius:5px; -webkit-box-shadow:#EFEFEF 0 0 5px;",
        leftAreaCss:"",
        rightAreaCss:"",
        
        norOptionCss:"padding:3px; min-height:12px; background-image:none; background:#FFFFFF; color:#086CAF;",     
        curOptionCss:"padding:3px; min-height:12px; background:#086CAF repeat-x left bottom; color:#FFFFFF;",
        
        btnCss:"color:#666666; display:block; width:25px; height:15px; line-height:15px; text-align:center; border:1px solid #aaaaaa;",     
        addBtnCss:"top:30px;",
        deleteBtnCss:"top:60px;",
        addBtnText:"<b><<</b>",
        deleteBtnText:"<b>>></b>"
    };
    
    iwapi.extend(this.options, params);
    
    this.addOption = [];
    
    this.delOption = [];
    
    this.init();
}

categoryOptions.prototype = {
    init:function(){
        var optionHandler = iwapi.bindScope(this, this.optionHandler);
        var addHandler = iwapi.bindScope(this, this.addHandler);
        var deleteHandler = iwapi.bindScope(this, this.deleteHandler);
        
        this.box = iwapi("<div>").attr("style", this.options.boxCss).css({width:this.options.width, height:this.options.height, position:"relative"});
    
        this.area1 = iwapi("<div>").attr({id:"area1", style:this.options.areaCss + this.options.leftAreaCss}).css({position:"absolute"});
        
        this.area2 = iwapi("<div>").attr({id:"area2", style:this.options.areaCss + this.options.rightAreaCss}).css({position:"absolute"});
        
        this.addBtn = iwapi("<a>").attr("style",this.options.btnCss + this.options.addBtnCss).html(this.options.addBtnText).css({position:"relative", cursor:"pointer"}).click(addHandler);
        
        this.deleteBtn = iwapi("<a>").attr("style",this.options.btnCss+ this.options.deleteBtnCss).html(this.options.deleteBtnText).css({position:"relative", cursor:"pointer"}).click(deleteHandler);
        
        this.options.target.append(this.box.append(this.area1).append(this.area2).append(this.addBtn).append(this.deleteBtn));
        
        var areaWidth = parseFloat(this.options.width)/2 - parseFloat(this.addBtn.css("width"))/2 - parseFloat(this.options.space);
        
        this.area1.css("width", areaWidth + "px");
        
        this.area2.css({width:areaWidth + "px", left:parseFloat(this.area1.css("width")) + parseFloat(this.addBtn.css("width")) + this.options.space*2 + "px"});
        
        var btnLeft = parseFloat(this.area1.css("width")) + this.options.space;
        
        this.addBtn.css({left: btnLeft + "px"});
        
        this.deleteBtn.css({left: btnLeft + "px"});
        
        iwapi.each(this.options.data, optionHandler);
    },
    
    optionHandler:function(id, content){            
        var option = iwapi("<div>").attr({id:this.options.optionName + id, style:this.options.norOptionCss}).html(content).mouseover(function(){
            this.style.cssText = curCss + "cursor:pointer;";
            
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();         
        }).mouseout(function(){
            this.style.cssText = norCss;
        });
        
        option[0].data =  iwapi("<input>").attr({name:this.options.optionName, type:"hidden", value:id});
        
        var selected = false;
        var curCss = this.options.curOptionCss;
        var norCss = this.options.norOptionCss; 
        var clickHandler = iwapi.bindScope(this, this.clickHandler); 
        
        iwapi.each(this.options.selected, function(i, index){
            if(id == index) {
                selected = true;
                return false;
            }
        });
        
        if(selected) this.area1.append(option.append(option[0].data).click(function(){
            clickHandler(this, false, false);
        }).dblclick(function(){
            clickHandler(this, false, true);
        }));
        else this.area2.append(option.click(function(){
            clickHandler(this, true, false);
        }).dblclick(function(){
            clickHandler(this, true, true);
        }));
    },
    
    clickHandler:function(elem, isAdd, isdbl){
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        var norCss = this.options.norOptionCss;
        var clickHandler = iwapi.bindScope(this, this.clickHandler);
        
        if(isdbl){
            if(isAdd) this.area1.append(iwapi(elem).append(elem.data).attr({"class":"", style:norCss}).mouseout(function(){
                this.style.cssText = norCss;
            }).click(function(){
                clickHandler(this, false);
            }).dblclick(function(){
                clickHandler(this, false, true);
            }));
            else{
                this.area2.append(iwapi(elem).attr({"class":"", style:norCss}).mouseout(function(){
                    this.style.cssText = norCss;
                }).click(function(){
                    clickHandler(this, true);
                }).dblclick(function(){
                    clickHandler(this, true, true);
                }));
                elem.data.remove();
            }
        }else{
            if(iwapi(elem).attr("class") == "selected_option"){
                var _array = [];
                
                iwapi(elem).attr("class", "");
                elem.onmouseout = function(){this.style.cssText = norCss;};
                iwapi.each((isAdd ? this.addOption : this.delOption), function(i, option){
                    if(option.id != elem.id) _array.push(option);
                });
                isAdd ? this.addOption = _array : this.delOption = _array;
            }else{
                isAdd ? this.addOption.push(elem) : this.delOption.push(elem);
                iwapi(elem).attr("class", "selected_option");
                elem.onmouseout = function(){};
            }
        }
    },
    
    addHandler:function(){
        var area1 = this.area1;
        var norCss = this.options.norOptionCss;
        var clickHandler = iwapi.bindScope(this, this.clickHandler);
        
        if(this.addOption.length > 0) iwapi.each(this.addOption, function(i, elem){
            area1.append(iwapi(elem).append(elem.data).attr({"class":" ", style:norCss}).mouseout(function(){
                this.style.cssText = norCss;
            }).click(function(){
                clickHandler(this, false);
            }).dblclick(function(){
                clickHandler(this, false, true);
            }));
        });
        
        this.addOption = [];
    },
    
    deleteHandler:function(){
        var area2 = this.area2;
        var norCss = this.options.norOptionCss;
        var clickHandler = iwapi.bindScope(this, this.clickHandler);
        
        if(this.delOption.length > 0) iwapi.each(this.delOption, function(i, elem){
            area2.append(iwapi(elem).attr({"class":" ", style:norCss}).mouseout(function(){
                this.style.cssText = norCss;
            }).click(function(){
                clickHandler(this, true);
            }).dblclick(function(){
                clickHandler(this, true, true);
            }));
            elem.data.remove();
        });
        
        this.delOption = [];
    }
}