//***********************************  API class *************************************
    var CImgSelAPI = function(){
        //buttons array
        this.instances = new Array(); //[0] => name ; [1] => object
    }
    
    CImgSelAPI.prototype.get_instances = function()
    {
        return this.instances;
    }

    CImgSelAPI.prototype.get_instance = function(name)
    {        
        for(var i = 0; i < this.instances.length; i++){
            if(this.instances[i][0] == name) return this.instances[i][1];
        }   
        return null;
    }

    CImgSelAPI.prototype.add_instance = function(name, instance)
    {                                                                    
        this.instances[this.instances.length] = new Array(name, instance);
    }

    //creating api object
    var ImgSelAPI = new CImgSelAPI();
    
    
    
    
    function imgsel_delete_file(instance_name){
        var instance = ImgSelAPI.get_instance(instance_name);
        instance.delete_file();
    }
    
    function imgsel_browse(instance_name){
        var instance = ImgSelAPI.get_instance(instance_name);
        instance.browse();
    }


    var FILESTATE_NORMAL = 0;
    var FILESTATE_CHANGED = 1;

    var CImgSel = function(instance_name, root_url, save_path, save_url){
        this.class_name = 'CImgSel';
        this.instance_name = instance_name;
        this.root_url = root_url;
        this.save_path = save_path; 
        this.save_url = save_url;               
        this.container_id = '';
        this.fname = '';
        this.origfname = '';
        this.path = '';
        this.url = '';
        this.state = FILESTATE_NORMAL;
        //creating container
        this.obj_cnt = document.createElement('div');
        this.obj_cnt.style.width = '200px';
            //creating hidden fields
            this.obj_hidden = document.createElement('input');   
            this.obj_hidden.type = 'hidden';
            this.obj_hidden.name = this.instance_name;
            this.obj_cnt.appendChild(this.obj_hidden);
            //creating browse anchor and image objects
            this.obj_browse_a = document.createElement('a');
            this.obj_browse_a.href = "javascript: imgsel_browse('" + this.instance_name + "')"; 
            this.obj_cnt.appendChild(this.obj_browse_a);
            this.obj_browse_img = document.createElement('img');
            this.obj_browse_img.className = 'imgsel_browse_img_left';
            this.obj_browse_img.src = this.root_url + '/images/browse.gif';    
            this.obj_browse_a.appendChild(this.obj_browse_img);
            //this.obj_cnt.appendChild(document.createElement('br'));
            //creating file anchor object
            this.obj_file_a = document.createElement('a'); 
            this.obj_file_a.target = '_blank';
            this.obj_file_a.href = "#";
            this.obj_file_a.style.fontWeight = 'bold';
            this.obj_cnt.appendChild(this.obj_file_a); 
            this.obj_cnt.appendChild(document.createTextNode('  '));
            //creating delete anchor and image objects
            this.obj_delete_a = document.createElement('a');
            this.obj_delete_a.href = "javascript: imgsel_delete_file('" + this.instance_name + "')";
            this.obj_cnt.appendChild(this.obj_delete_a);
            this.obj_delete_img = document.createElement('img');    
            this.obj_delete_img.border = 0;
            this.obj_delete_img.src = this.root_url + '/images/delete.gif';
            this.obj_delete_a.appendChild(this.obj_delete_img);
        //declaring events
        this.on_change = null;
        //notifyning file change     
        this._file_changed();
        //adding instance to api class
        ImgSelAPI.add_instance(this.instance_name, this);
    }
    
    CImgSel.prototype._xml_specialchars = function(string){
        var tt = {"&":"&#038;", '"':"&#034;", "<":"&#060;", ">":"&#062;", "'":"&#039;"};
        for(var str in tt){
            string = String(string).replace('/' + str + '/g', tt[str]);          
        }
        return string;
    }
    
    CImgSel.prototype._xml_parse = function(xml){
        if (window.ActiveXObject){
            var vXMLDoc = new ActiveXObject("Microsoft.XMLDOM");
            vXMLDoc.async = false;
            //IE uses the loadXML method when the source document is NOT XML
            vXMLDoc.loadXML(xml);
        }else if(document.implementation.createDocument){
            //Firefox requires a parser object to read the text
            var vParser = new DOMParser();
            var vXMLDoc = vParser.parseFromString(xml, "text/xml");
        }
        return vXMLDoc;
    }
    
    CImgSel.prototype._xml_get_node_text_content = function(node){
        var nodetext = null;
        if(!node) return nodetext;
        if(typeof(node.text) != 'undefined'){
            //Internet Explorer
            nodetext = node.text;        
        } else if(typeof(node.textContent) != 'undefined') {
            //Mozzilla Firefox
            nodetext = node.textContent;         
        }
        return nodetext;
    }

    CImgSel.prototype._refresh_xml = function(){
        this.obj_hidden.value = this.get_xml();
    }

    CImgSel.prototype._file_changed = function(){
        if(this.fname){
            this.obj_file_a.href = this.url + '/' + this.fname;
            var imgs= this.obj_file_a.getElementsByTagName('img');
            for (i=0; i<imgs.length; i++)
                this.obj_file_a.removeChild(imgs[i]);
            var img =document.createElement('img');
            img.setAttribute('src',this.url+'/'+this.fname);
            img.style.width='80px';
            img.style.height='60px';
            img.style.border='1px solid #000000';
            this.obj_file_a.appendChild(img);
            this.obj_file_a.style.display = '';
            this.obj_delete_a.style.display = '';
            this.obj_browse_img.className = 'imgsel_browse_img_right';
        } else {
            this.obj_file_a.style.display = 'none';
            this.obj_delete_a.style.display = 'none';
            this.obj_browse_img.className = 'imgsel_browse_img_left';
        }            
        this._refresh_xml();
        if(this.on_change) this.on_change();
    }
    
    CImgSel.prototype._set_file = function(state, path, url, fname, origfname){
        this.state = state;
        this.path = path;
        this.url = url;
        this.fname = fname;
        this.origfname = origfname;
        this._file_changed();
    }
    
    CImgSel.prototype.delete_file = function(){
        this.state = FILESTATE_CHANGED;
        this.path = '';
        this.url = '';
        this.fname = '';
        this.origfname = '';
        this._file_changed();
    }
    
    CImgSel.prototype._set_new_file = function(fname, origfname){
        this._set_file(FILESTATE_CHANGED, this.save_path, this.save_url, fname, origfname);
    }
    
    CImgSel.prototype._set_init_file = function(path, url, fname/*, origfname*/){
        this._set_file(FILESTATE_NORMAL, path, url, fname, fname/*, origfname*/);
    }   
       
    CImgSel.prototype.set_container_id = function(container_id){
        this.container_id = container_id;
    }
    //loads data from xml
    CImgSel.prototype.set_init_xml = function(xml){
        if(!xml) return;
        xml_doc = this._xml_parse(xml);
        var xml_root = xml_doc.getElementsByTagName('root')[0];
        var xml_path = this._xml_get_node_text_content(xml_root.getElementsByTagName('path')[0]);
        var xml_url = this._xml_get_node_text_content(xml_root.getElementsByTagName('url')[0]);
        var xml_fname = this._xml_get_node_text_content(xml_root.getElementsByTagName('fname')[0]);
        this._set_init_file(xml_path, xml_url, xml_fname/*, xml_origfname*/); 
    }
    
    CImgSel.prototype.browse = function(){
        window.open(this.root_url + '/' + 'imgsel_upload.php?savepath=' + this.save_path + '&instance_name=' + this.instance_name, '', 'height=500,width=500');          
    }
    
    CImgSel.prototype.get_xml = function(){
        var xml = '';
        xml += '<root>';
        xml += '<state>' + this._xml_specialchars(this.state) + '</state>';
        xml += '<path>' + this._xml_specialchars(this.path) + '</path>';
        xml += '<url>' + this._xml_specialchars(this.url) + '</url>';
        xml += '<fname>' + this._xml_specialchars(this.fname) + '</fname>';
        xml += '<origfname>' + this._xml_specialchars(this.origfname) + '</origfname>';
        xml += '</root>';
        return xml;
    }
    
    CImgSel.prototype.get_value = function(){
        var value = new Array();
        value['state'] = this.state;
        value['path'] = this.path;
        value['url'] = this.url;
        value['fname'] = this.fname;
        value['origfname'] = this.origfname;
        return value;
    }
    
    CImgSel.prototype.place = function(){
        var cnt = document.getElementById(this.container_id);
        if(cnt) cnt.appendChild(this.obj_cnt);
    }
    
    CImgSel.prototype.remove = function(){
        var cnt = document.getElementById(this.container_id);
        if(cnt) cnt.removeChild(this.obj_cnt)
    }