var dsCombo = function(id) {
    var controlID = id;

    var myBusy = false;
    this.busy = function(){return myBusy;}
    

    this.clearItem = function() {
        var combo = document.getElementById(controlID);

        //clear combo items
        for (var i = combo.length - 1; i >= 0; i--) {
            combo.options[i] = null;
        }
    }
    
    this.disableControl = function(val){
        document.getElementById(controlID).disabled = val;
    }

    this.addItem = function(text, value) {
        var combo = document.getElementById(controlID);
        var op = document.createElement('option');
        op.text = text;
        op.value = value;
        combo.options.add(op);
    }
    
    this.loadData = function(data, dataType, selectedValue){
        myBusy = true;
        var combo = document.getElementById(controlID);
        var defautValue = 0;

        //clear combo items
        for (var i = combo.length - 1; i >= 0; i--) {
            combo.options[i] = null;
        }

        var LineItem = 0;
        //binding
        for (var i = 0; i < data.length; i++) {
            if(data[i].datatype == dataType){
                // set default value
                if(defautValue == 0) defautValue = data[i].id;
            
                var op = document.createElement('option');
                op.text = data[i].name;
                op.value = data[i].id;
                combo.options.add(op);
                
                //set selected index to current
                if(selectedValue && data[i].id == selectedValue){
                    combo.selectedIndex = LineItem;
                }
                LineItem++;
            }else{
                if(defautValue != 0) break; //alwary order datatype
            }
        }

//        //raise event
//        if (onChangeCallBack) {
//            onChangeCallBack(defautValue);
//        }

        myBusy = false;
    }

    this.reload = function(url) {
        myBusy = true;
        
        Ext.Ajax.request({
            url: url
            , success: function(o) {
                try {
                    var data = Ext.util.JSON.decode(o.responseText);
                    var combo = document.getElementById(controlID);
                    var defautValue = 0;

                    //clear combo items
                    for (var i = combo.length - 1; i >= 0; i--) {
                        combo.options[i] = null;
                    }

                    //binding
                    for (var i = 0; i < data.length; i++) {
                        // set default value
                        if (i == 0) defautValue = data[i].id;

                        var op = document.createElement('option');
                        op.text = data[i].name;
                        op.value = data[i].id;
                        combo.options.add(op);
                    }

                    //raise event
                    if (onChangeCallBack) {
                        onChangeCallBack(defautValue);
                    }
                    myBusy = false;
                } catch (e) {
                    myBusy = false;
                }
            }
            , failure: function(o) { alert(o.responseText); }
        });
    }

    this.getSelectedValue = function() {
        var combo = document.getElementById(controlID);
        return combo.options.length == 0 ? "" : combo.options[combo.selectedIndex].value;
    }

    this.getSelectedText = function() {
        var combo = document.getElementById(controlID);
        return combo.options.length == 0 ? "" : combo.options[combo.selectedIndex].text;
    }

    var onChangeCallBack;
    this.onChange = function(fn) {
        onChangeCallBack = fn
    };

    this.raiseOnChange = function(){
        if (onChangeCallBack) {
            var combo = document.getElementById(controlID);
            var value = combo.options.length == 0 ? "" : combo.options[combo.selectedIndex].value;
            onChangeCallBack(value);
        }
    }

    //add onchange event
    document.getElementById(controlID).onchange = function() {
        if (onChangeCallBack) {
            var combo = document.getElementById(controlID);
            var value = combo.options.length == 0 ? "" : combo.options[combo.selectedIndex].value;
            onChangeCallBack(value);
        }
    };

}