myEditableBox based on ajax ----- add,submit included

var EditableBox = Class.create();
EditableBox.prototype = {
    initialize:function(id){
    this.src = document.getElementById(id);
    this.id = id;
    this.optionDiv = this.getOptionDiv();
    this.src.onclick = this.click.bind(this);
},

getOptionDiv:function(){
var option = {
        parameters:"s="+this.id,
        method:"get",
        onSuccess:function(transport){
        var rp = transport.responseText;
        var arr = rp.split(',');
        document.getElementById(arr[arr.length-1]).value = "please select or input..";
        var div = document.createElement("div");
        div.id = 'optionshow';
        div.style.position = 'absolute';
        div.style.left = new Position.cumulativeOffset(document.getElementById(arr[arr.length-1]))[0];
        div.style.top  = new Position.cumulativeOffset(document.getElementById(arr[arr.length-1]))[1]+30;
        div.style.width = document.getElementById(arr[arr.length-1]).style.width;
        div.style.height = '10px';
        div.style.display = 'none';
        
        document.body.appendChild(div);
        for(var j=0;j<arr.length-1;j++){
            var spanobj = new spans(j,arr[j],document.getElementById(arr[arr.length-1]).style.width,arr[arr.length-1]);
            div.appendChild(spanobj.getspan());
            }
        }
    };

    var ajax = new Ajax.Request("ajax.aspx",option);
},
    
click:function(){
    if(document.getElementById('optionshow').style.display=='none'){
        document.getElementById('optionshow').style.display='block';
        
    }else{
        document.getElementById('optionshow').style.display='none';
    }
},
submitItem:function(){
    var options_submit  = {
        parameters:"sItem="+this.src.value,
        method:"get",
        onSuccess:function(transport){
            var result_submit = transport.responseText;
            alert("ok!");    
        }
    };
    var ajax_submit = new Ajax.Request("ajax.aspx",options_submit);
},
addItem:function(){
        var option_add = {
        parameters:"addItem="+this.src.value+"&s="+this.id,
        method:"get",
        onSuccess:function(transport){
            if(document.getElementById('optionshow'))Element.remove("optionshow");
            var rp = transport.responseText;
            
            var arr = rp.split(',');
            
            document.getElementById(arr[arr.length-1]).value = "please select or input..";
            
            var div = document.createElement("div");
            
            div.id = 'optionshow';
            div.style.position = 'absolute';
            div.style.left = new Position.cumulativeOffset(document.getElementById(arr[arr.length-1]))[0];
            div.style.top  = new Position.cumulativeOffset(document.getElementById(arr[arr.length-1]))[1]+30;
            div.style.width = document.getElementById(arr[arr.length-1]).style.width;
            div.style.height = '10px';
            div.style.display = 'none';
            
            document.body.appendChild(div);
            for(var j=0;j<arr.length-1;j++){
                var spanobj = new spans(j,arr[j],document.getElementById(arr[arr.length-1]).style.width,arr[arr.length-1]);
                div.appendChild(spanobj.getspan());
                }
                
            }
        };

    var ajax = new Ajax.Request("ajax.aspx",option_add);    
},
    
otherMethod:function(){
    
}
}
var spans = Class.create();
spans.prototype= {
    initialize:function(id,inner,width,targetId){
        this.span = document.createElement('span');
        this.span.id = id;
        this.span.innerHTML = inner;
        this.span.style.backgroundColor = '#dcd0d8';
        this.span.style.width =width;
        this.span.style.height = '5px'
        this.span.style.cursor = 'hand';
        this.span.onclick = this.click.bind(this);
        this.span.onmouseover = this.hightlight.bind(this);
        this.targetId = targetId;
    },
    
    hightlight:function(){
    if(this.span.style.backgroundColor=='#dcd0d8'){
    this.span.style.backgroundColor = '#316AC5';
    }else{
    this.span.style.backgroundColor = '#dcd0d8';
    }
    },
    
    click:function(){
    $(this.targetId).value = this.span.innerHTML;
    },
    getspan:function(){
        return this.span;
    },
    
    setbgColor:function(cl){
    this.span.style.backgroundColor = cl;
    },
    getbtColor:function(){
        return this.span.style.backgroundColor;
    }
}