// COCO WIDGETS
// JS widgets for cocosoft specific purposes

Object.extend(Element, {
	getWidth: function(element) {
	   	element = $(element);
	   	return element.offsetWidth; 
	},
	setWidth: function(element,w) {
	   	element = $(element);
    	element.style.width = w +"px";
	},
	setHeight: function(element,h) {
   		element = $(element);
    	element.style.height = h +"px";
	},
	setTop: function(element,t) {
	   	element = $(element);
    	element.style.top = t +"px";
	},
	getTop: function(element)
	{
			var pos=0;
			do pos+=element.offsetTop
			while(element=element.offsetParent);
			return pos;
	},
	setSrc: function(element,src) {
    	element = $(element);
    	element.src = src; 
	},
	setHref: function(element,href) {
    	element = $(element);
    	element.href = href; 
	},
	setInnerHTML: function(element,content) {
		element = $(element);
		element.innerHTML = content;
	}
});


var CocoSettingsMgr = Class.create();
CocoSettingsMgr.prototype = {
	OS:null,browser:null,version:null,total:null,thestring:null,
	initialize: function() 
	{
		this.getBrowserInfo();
	},
	
	getBrowser: function()
	{
		return this.browser;
	},
		
	getBrowserInfo: function() 
	{
		var detect = navigator.userAgent.toLowerCase();
		this.browser = "An unknown browser"; 
		if (this.checkIt('konqueror')) {
			this.browser = "Konqueror";
			this.OS = "Linux";
		}
		else if (this.checkIt('safari')) this.browser 	= "Safari"
		else if (this.checkIt('omniweb')) this.browser 	= "OmniWeb"
		else if (this.checkIt('opera')) this.browser 		= "Opera"
		else if (this.checkIt('webtv')) this.browser 		= "WebTV";
		else if (this.checkIt('icab')) this.browser 		= "iCab"
		else if (this.checkIt('msie')) this.browser 		= "Internet Explorer"
		else if (!this.checkIt('compatible')) {
			this.browser = "Netscape Navigator"
			this.version = detect.charAt(8);
		}

		if (!this.version) 
			this.version = detect.charAt(this.place + this.thestring.length);
	
		if (!this.OS) {
			if (this.checkIt('linux')) this.OS 		= "Linux";
			else if (this.checkIt('x11')) this.OS 	= "Unix";
			else if (this.checkIt('mac')) this.OS 	= "Mac"
			else if (this.checkIt('win')) this.OS 	= "Windows"
			else this.OS 								= "an unknown operating system";
		}
	},

	checkIt: function(string) {
		var detect = navigator.userAgent.toLowerCase();
		this.place = detect.indexOf(string) + 1;
		this.thestring = string;
		return this.place;
	},
	
	getWindowWidth: function() 
	{
		var myWidth = 0;
		if( typeof( window.innerWidth ) == 'number' ) {
			//Non-IE
			myWidth = window.innerWidth;
		} else if( document.documentElement && document.documentElement.clientWidth ) {
			//IE 6+ in 'standards compliant mode'
			myWidth = document.documentElement.clientWidth;
		} else if( document.body && document.body.clientWidth ) {
			//IE 4 compatible
			myWidth = document.body.clientWidth;
		}
		return myWidth; 
	},
	
	getWindowHeight: function() 
	{
		var myHeight = 0;
		if( typeof( window.innerHeight ) == 'number' ) {
			//Non-IE
			myHeight = window.innerHeight;
		} else if( document.documentElement &&  document.documentElement.clientHeight) {
			//IE 6+ in 'standards compliant mode'
			myHeight = document.documentElement.clientHeight;
		} else if( document.body && document.body.clientHeight ) {
			//IE 4 compatible
			myHeight = document.body.clientHeight;
		}
		return myHeight;
	}
};

var sett_mgr = new CocoSettingsMgr();


var CocoInPlaceEditor = Class.create();

CocoInPlaceEditor.prototype = {
	initialize: function(element, oid, listContainer, styleForm, styleText)
	{
		this.baseInitialize(element, oid, listContainer, styleForm, styleText);
		this.bindEvents();
	},
	
  baseInitialize: function(element, oid, listContainer, styleForm, styleText)
  {
		
		this.element = $(element);    
    this.text = this.element.textContent;
    this.element.textContent = "";
    this.oid = oid;    
    
    if (listContainer)
    {
      listContainer.addEditor(this);
      this.list = listContainer;
    }
    else
    {
      this.list = null;
    }
    
    // create the textView div
    this.divTextView = document.createElement("div");
    this.divTextView.textContent = this.text;    
    this.element.appendChild(this.divTextView);
    
    // create the textEdit div
    this.divTextEdit = document.createElement("div");    
      // the editor
			/*
      this.tEditor = document.createElement("input");
      this.tEditor.type = "text";
      this.tEditor.name = "value";
			this.tEditor.setAttribute("autocomplete","OFF"); 
			*/
			
			this.createTextEditor();
      this.divTextEdit.appendChild(this.tEditor);
			new Insertion.Bottom(this.divTextEdit, '  ');
	      
      this.createButtons();
    
    //this.divTextEdit.hide();
			Element.hide(this.divTextEdit);
		this.element.appendChild(this.divTextEdit);
		
		// set the styles
		if (styleForm)
		{
			Element.addClassName(this.tEditor,styleForm);
			Element.addClassName(this.btnYes,styleForm);
			Element.addClassName(this.btnNo,styleForm);
			
		}
		
		if (styleText)
		{
			Element.addClassName(this.divTextView,styleText);
		}
    
    // behaviuour
    this.bEditing = false;
    
    
    // appearance
    this.textStyle = "";
    this.editorStyle = "";
    this.buttonStyle = "";
        
  }, // initialize
	
	bindEvents: function()
	{
		Event.observe(this.divTextView, 'click', this.onClick_divTextView.bindAsEventListener(this), false);
    Event.observe(this.btnYes, 'click', this.onClick_btnYes.bindAsEventListener(this), false);
    Event.observe(this.btnNo, 'click', this.onClick_btnNo.bindAsEventListener(this), false);
    Event.observe(this.tEditor, 'keypress', this.onKeyPress_tEditor.bindAsEventListener(this), false);
	},
	
	createTextEditor: function()
	{		  
      // the editor
      this.tEditor = document.createElement("input");
      this.tEditor.type = "text";
      this.tEditor.name = "value";
	  this.tEditor.setAttribute("autocomplete","OFF"); 
	},
	
	createButtons: function()
	{
		// and the buttons
		this.btnYes = document.createElement("input");
		this.btnYes.type = "button";
		this.btnYes.value = "yes";
		this.divTextEdit.appendChild(this.btnYes);
		new Insertion.Bottom(this.divTextEdit, '  ');
		
		this.btnNo = document.createElement("input");
		this.btnNo.type = "button"
		this.btnNo.value = "no"
		this.divTextEdit.appendChild(this.btnNo);
	},
  
  
  onClick_divTextView: function(event)
  {
    this.showEditor();
  },
  
  onClick_btnYes: function(event)
  {
    this.acceptEdition();
  },
  
  onClick_btnNo: function(event)
  {
      this.hideEditor();
  },
  
  onKeyPress_tEditor: function(event)
  {
    if(event.keyCode == Event.KEY_RETURN) 
    {
      this.acceptEdition();
    }
    else if (event.keyCode == Event.KEY_ESC)
    {
      this.hideEditor();
    }
  },
  
  
  acceptEdition: function()
  {
    if (this.tEditor.value > "")
			this.text = this.tEditor.value;
			
		//if (!this.list || this.list.onAcceptEdition(this))
	  //  this.hideEditor();
		this.list.onAcceptEdition(this);
  },
  
  
  
  showEditor: function()
  {
    if (this.bEditing) 
      return;    
    this.bEditing = true;
    
    if (this.list)
      this.list.cancelOpenEditors();
    
    
    this.tEditor.value = this.divTextView.textContent;
    //this.divTextView.hide();
		Element.hide(this.divTextView);
    //this.divTextEdit.show();
		Element.show(this.divTextEdit);
    this.tEditor.focus();
  }, // showEditor
  
  hideEditor: function()
  {
		this.divTextView.textContent = this.text;
		 
    //this.divTextEdit.hide();
		Element.hide(this.divTextEdit);
    //this.divTextView.show();
		Element.show(this.divTextView);
   
    this.bEditing = false;
  }, // hideEditor
  
  isEditing: function()
  {
    return this.bEditing;
  }
    
};	


var CocoEditInPlaceList = Class.create();
CocoEditInPlaceList.prototype = {
  initialize: function()
  {
    this.editorList = new Array();
  },
  
  addEditor: function(a_editor)
  {
    this.editorList.push(a_editor);
  },
  
  cancelOpenEditors: function()
  {
    // TODO: buclar cerrando los editores abiertos
    for (i=0; i<this.editorList.length; i++)
    {
    	if (this.editorList[i].isEditing)
    	  this.editorList[i].hideEditor();
    }
  },
	
	onAcceptEdition: function(aEditor)
	{
		alert("redefine onAcceptEdition");
		return true;
	}
};



var CocoInPlaceComboEditorXML = Class.create();
Object.extend(CocoInPlaceComboEditorXML.prototype, CocoInPlaceEditor.prototype);
Object.extend(CocoInPlaceComboEditorXML.prototype, {
  initialize: function(element, selected_oid, listContainer, styleForm, styleText, url_xml_load)
	{		
		this.comboXMLinitialize(element, selected_oid, listContainer, styleForm, styleText, url_xml_load);
	},
	
	comboXMLinitialize: function(element, selected_oid, listContainer, styleForm, styleText, url_xml_load)
	{
		this.baseInitialize(element, selected_oid, listContainer, styleForm, styleText);
		this.bindEvents();
		this.divTextView.textContent = "Loading...";
		this.load_select_list_items(url_xml_load, this);
	},
	
	createTextEditor: function()
	{		// redefinim la creació de l'editor, pq sigui un "option"
      this.tEditor = document.createElement("select");
	},
	
	createButtons: function()
	{
		// no volem botons
		return;
	},
	
	bindEvents: function()
	{
		Event.observe(this.divTextView, 'click', this.onClick_divTextView.bindAsEventListener(this), false);
    Event.observe(this.tEditor, 'keypress', this.onKeyPress_tEditor.bindAsEventListener(this), false);
		Event.observe(this.tEditor, 'change', this.onChange_tEditor.bindAsEventListener(this), false);
	},
	
	onKeyPress_tEditor: function(event)
  {
    if (event.keyCode == Event.KEY_ESC)
    {
      this.hideEditor();
    }
  },
	
	onChange_tEditor: function(event)
	{
		this.acceptEdition();
	},

	acceptEdition: function()
  {
		this.refresh_selected_index();
		this.hideEditor();
  },
	
	refresh_selected_index: function()
	{
		this.oid = this.tEditor.options[this.tEditor.selectedIndex].value;
		this.text = this.tEditor.options[this.tEditor.selectedIndex].text;
		this.divTextView.textContent = this.text;
	},
	
	
	
	
	load_select_list_items: function(url_xml_load, a_combo_editor)
	{ // retorna un array amb els elements
		var a_select = a_combo_editor.tEditor;
		var a_ref_oid = a_combo_editor.oid;
		
		var opt = {
			// Use POST
			method: 'post',
			// Send this lovely data
			postBody: '',
			
			
			// Handle successful response
			onSuccess: function(t) {
					//alert (t.responseXML.documentElement.getElementsByTagName("item").childNodes);
					var doc = t.responseXML.documentElement;
					
					
					var items = doc.getElementsByTagName('item');
					for (i=0; i<items.length; i++)
					{
						var xml_node_item = items[i];
						var oid = xml_node_item.getElementsByTagName("oid")[0].childNodes[0].nodeValue;
						var text = xml_node_item.getElementsByTagName("text")[0].childNodes[0].nodeValue;					
						optionTag = document.createElement("option");
						optionTag.value = oid;
						if(a_ref_oid == oid)
						{ 
							optionTag.selected = true;
							this.text = text;
						}
						optionTag.appendChild(document.createTextNode(text));
						a_select.appendChild(optionTag);
					}	
					a_combo_editor.refresh_selected_index();									
			},
			// Handle 404
			on404: function(t) {
					alert('Error 404: location "' + t.statusText + '" was not found.');
			},
			// Handle other errors
			onFailure: function(t) {
					alert('Error ' + t.status + ' -- ' + t.statusText);
			}
		};
				
		req = new Ajax.Request(url_xml_load, opt);
		
	}
});


var COCOModalWindow = Class.create();
COCOModalWindow.prototype = {
		
	yPos : 0,
	xPos : 0,
	
	initialize: function(url, width, height, options)
	{
		this.getBrowserInfo();
		this.url = url;
		this.width = width;
		this.height = height;
		this.options = options || {};
		this.create_widget();
		this.activate();
	},
	
	create_widget: function()
	{
		bod 				= document.getElementsByTagName('body')[0];
		this.overlay 			= document.createElement('div');
		this.overlay.id		= 'overlay';
		this.lb					= document.createElement('div');
		this.lb.id				= 'lightbox';
		//this.lb.className 	= 'loading';
		Element.setHeight(this.lb, this.height);
		Element.setWidth(this.lb, this.width);
		lbLeft = (this.getWindowWidth() - this.width) / 2;
		lbTop = (this.getWindowHeight() - this.height) / 4;
		this.lb.style.left = lbLeft;
		this.lb.style.top = lbTop;
		Element.hide(this.lb);
		
		
				
		this.divLoading	= document.createElement('div');
		this.content = document.createElement('div');
		
		this.divLoading.innerHTML = '<p>Loading</p>';
		
		this.lb.appendChild(this.content);
		this.lb.appendChild(this.divLoading);
				
		bod.appendChild(this.overlay);
		bod.appendChild(this.lb);
	},
	
	// Turn everything on - mainly the IE fixes
	activate: function(){		
		if (this.browser == 'Internet Explorer'){
			this.getScroll();
			this.prepareIE('100%', 'hidden');
			this.setScroll(0,0);
			this.hideSelects('hidden');
		}
		this.displayLightbox();
	},
	
	
	// Ie requires height to 100% and overflow hidden or else you can scroll down past the lightbox
	prepareIE: function(height, overflow){
		bod = document.getElementsByTagName('body')[0];
		bod.style.height = height;
		bod.style.overflow = overflow;
  
		htm = document.getElementsByTagName('html')[0];
		htm.style.height = height;
		htm.style.overflow = overflow; 
	},
	
	// In IE, select elements hover on top of the lightbox
	hideSelects: function(visibility){
		selects = document.getElementsByTagName('select');
		for(i = 0; i < selects.length; i++) {
			selects[i].style.visibility = visibility;
		}
	},
	
	// Taken from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
	getScroll: function(){
		if (self.pageYOffset) {
			this.yPos = self.pageYOffset;
		} else if (document.documentElement && document.documentElement.scrollTop){
			this.yPos = document.documentElement.scrollTop; 
		} else if (document.body) {
			this.yPos = document.body.scrollTop;
		}
	},
	
	setScroll: function(x, y){
		window.scrollTo(x, y); 
	},
	
	displayLightbox: function(display){
		this.overlay.style.display = "block";
		this.lb.style.display = "none";
		this.loadInfo();
	},
	
	// Begin Ajax request based off of the href of the clicked linked
	loadInfo: function() {
		//this.divLoading.style.display = 'true';
		var myAjax = new Ajax.Updater(
        this.content, this.url,
        {method: 'post', parameters: "", evalScripts:true, onComplete: this.processInfo.bindAsEventListener(this)}
		);
		
	},
	
	// Display Ajax response
	processInfo: function(response){
		Element.hide(this.divLoading);
		this.lb.style.display = "block";	
		this.actions();			
	},
	
	actions: function(){
		lbActions = document.getElementsByClassName('lbAction');

		for(i = 0; i < lbActions.length; i++) {
			Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAsEventListener(this), false);
			lbActions[i].onclick = function(){return false;};
		}
	},
	
	deactivate: function(){
		Element.remove(this.lb);
		Element.remove(this.overlay);
		
		if (this.browser == "Internet Explorer"){
			this.setScroll(0,this.yPos);
			this.prepareIE("auto", "auto");
			this.hideSelects("visible");
		}
	},
	
	getContentInputsValuesArray: function()
	{
		arr = Array();
		arr_inputs = this.content.getElementsByTagName('input');		
		for (i=0;i<arr_inputs.length; i++)
			arr[arr_inputs[i].id]  = arr_inputs[i].value;
			
		arr_inputs = this.content.getElementsByTagName('select');		
		for (i=0;i<arr_inputs.length; i++)
			arr[arr_inputs[i].id]  = arr_inputs[i].value;
			
		arr_inputs = this.content.getElementsByTagName('textarea');		
		for (i=0;i<arr_inputs.length; i++)
			arr[arr_inputs[i].id]  = arr_inputs[i].value;

		return arr;
	},
	
	OS:null,browser:null,version:null,total:null,thestring:null,
	  getBrowserInfo: function() 
		{
			var detect = navigator.userAgent.toLowerCase();
			this.browser = "An unknown browser"; 
			if (this.checkIt('konqueror')) {
				this.browser = "Konqueror";
				this.OS = "Linux";
			}
			else if (this.checkIt('safari')) this.browser 	= "Safari"
			else if (this.checkIt('omniweb')) this.browser 	= "OmniWeb"
			else if (this.checkIt('opera')) this.browser 		= "Opera"
			else if (this.checkIt('webtv')) this.browser 		= "WebTV";
			else if (this.checkIt('icab')) this.browser 		= "iCab"
			else if (this.checkIt('msie')) this.browser 		= "Internet Explorer"
			else if (!this.checkIt('compatible')) {
				this.browser = "Netscape Navigator"
				this.version = detect.charAt(8);
			}

		if (!this.version) 
			this.version = detect.charAt(this.place + this.thestring.length);
	
		if (!this.OS) {
			if (this.checkIt('linux')) this.OS 		= "Linux";
			else if (this.checkIt('x11')) this.OS 	= "Unix";
			else if (this.checkIt('mac')) this.OS 	= "Mac"
			else if (this.checkIt('win')) this.OS 	= "Windows"
			else this.OS 								= "an unknown operating system";
		}
	},

	checkIt: function(string) {
		var detect = navigator.userAgent.toLowerCase();
		this.place = detect.indexOf(string) + 1;
		this.thestring = string;
		return this.place;
	},
	
	getWindowWidth: function() 
	{
		var myWidth = 0;
		if( typeof( window.innerWidth ) == 'number' ) {
			//Non-IE
			myWidth = window.innerWidth;
		} else if( document.documentElement && document.documentElement.clientWidth ) {
			//IE 6+ in 'standards compliant mode'
			myWidth = document.documentElement.clientWidth;
		} else if( document.body && document.body.clientWidth ) {
			//IE 4 compatible
			myWidth = document.body.clientWidth;
		}
		return myWidth; 
	},
	
	getWindowHeight: function() 
	{
		var myHeight = 0;
		if( typeof( window.innerHeight ) == 'number' ) {
			//Non-IE
			myHeight = window.innerHeight;
		} else if( document.documentElement &&  document.documentElement.clientHeight) {
			//IE 6+ in 'standards compliant mode'
			myHeight = document.documentElement.clientHeight;
		} else if( document.body && document.body.clientHeight ) {
			//IE 4 compatible
			myHeight = document.body.clientHeight;
		}
		return myHeight;
	}
};


var CocoAjaxAutocompleter = Class.create();
Object.extend(CocoAjaxAutocompleter.prototype, Ajax.Autocompleter.prototype);
Object.extend(CocoAjaxAutocompleter.prototype, {
	__parent: Ajax.Autocompleter.prototype,
	
	render: function()
	{
		this.__parent.render.call(this); // llamamos al render del Autocopleter
		// posicionem l'scroll si cal		
		var topElem = Element.getTop(this.getEntry(this.index));
		var scrolly = Position.realOffset(this.getEntry(this.index))[1];
		topElem -= scrolly;
		var winHeight = sett_mgr.getWindowHeight();
		//TODO: revisar render per firefox
		if ((winHeight <= topElem || topElem <= 0) && sett_mgr.getBrowser() == 'Internet Explorer')
		{
			Element.scrollTo(this.getEntry(this.index));
		}
	}
});

var CocoAjaxUploader = Class.create();
CocoAjaxUploader.prototype = {
	_path_form: '/php_helpers/upload/upload_form.php',
	_element: null,
	initialize: function(a_id, a_path, options)
	{
		this._id = a_id;
		this._path = a_path;
		this.options = options || {};
	},
	
	show: function(a_element)
	{
		this._element = $(a_element);
		var opt = 
		{
			method: 'post',
			postBody: 'id_form=' + this._id + '&path=' + this._path + '&after_upload_on_ok=' +  this.options.stmt_after_upload_on_ok + '&on_close=' + this.options.stmt_on_close +
					  '&css_form_items=' + this.options.css_form_items + '&css_text=' +  this.options.css_text,
			evalScripts:true,
			owner: this,
			onComplete: function()
			{		
				Effect.SlideDown(a_element,{duration:0.5} );				
			},		
			on404: function(t) { alert('Error 404: location "' + owner._path_form + '" was not found.'); },
			onFailure: function(t) { alert('Error ' + t.status + ' -- ' + t.statusText); }
		};		
		alert(this._path_form);
		new Ajax.Updater(this._element, this._path_form, opt);
	}
};

var CocoAjaxImgSelector = Class.create();
CocoAjaxImgSelector.prototype = {
	initialize: function(a_element, a_current_filename, a_path, a_base_img_path, a_url_xml_load, options)
	{
		this.element = $(a_element);
		this.path = a_path;
		this.base_img_path = a_base_img_path;
		this.url_xml_load = a_url_xml_load;
		this.current_img_filename = a_current_filename;
		// load options
		this.options = options || {};		
		this.options.img_max_width = this.options.img_max_width || 100;
		this.options.n_img_per_row = this.options.n_img_per_row || 3;		
		// divs contenedores de imagenes
		this.div_img_array = new Array();
		this.current_div_img = null;
		this.create_widget();
		this.load_img_array();
		
	},
	
	load_img_array: function()
	{
		var opt = {
			// Use POST
			method: 'post',
			// Send this lovely data
			postBody: 'option=llista_imatges&path=' + this.path,						
			// Handle successful response
			owner: this,
			
			onSuccess: this.on_load_img_array_success.bind(this),
			// Handle 404
			on404: function(t) {
					alert('Error 404: location "' + t.statusText + '" was not found.');
			},
			// Handle other errors
			onFailure: function(t) {
					alert('Error ' + t.status + ' -- ' + t.statusText);
			}
		};
		req = new Ajax.Request(this.url_xml_load, opt);
		
	},
	
	on_load_img_array_success: function(t)
	{
		var doc = t.responseXML.documentElement;										
		var items = doc.getElementsByTagName('item');
		this.div_img_array = new Array();
		for (i=0; i<items.length; i++)
		{
			var xml_node_item = items[i];
			var filename = xml_node_item.getElementsByTagName("text")[0].childNodes[0].nodeValue;				
			div_img = this.create_new_div_img(filename);									
			this.div_img_array.push(div_img);
			if(this.current_img_filename == filename)
			{ 				
				this.set_curent_div_img(div_img);
			}	
								
		}
		
		this.render_image_list();
	},
	
	create_widget: function()
	{
		this.table = document.createElement('table');
		
		// UPLOAD
		var tBodyUpload = document.createElement("tbody");
		// row del boto
		var tRow = document.createElement("tr");
		var tCell = document.createElement("td");
		tCell.colSpan = 3;
		var btnUpload = document.createElement("input");
		btnUpload.type = "button";
		btnUpload.value = "Enviar Archivo";
		Event.observe(btnUpload, 'click', this.on_click_upload_btn.bindAsEventListener(this), false);
		tCell.appendChild(btnUpload);
		tRow.appendChild(tCell);
		tBodyUpload.appendChild(tRow);
		// row del div de upload
		var tRow = document.createElement("tr");
		var tCell = document.createElement("td");
		tCell.colSpan = 3;
		this.divUpload = document.createElement("div"); 
		this.divUpload.id = this.element.id + "_divUpload";		
		this.divUpload.style.display='none';
		this.divUpload.style.backgroundColor='#DDDDDD';
		this.divUpload.style.padding = '5px';
		tCell.appendChild(this.divUpload);
		tRow.appendChild(tCell);
		tBodyUpload.appendChild(tRow);
		// row del div de upload
		var tRow = document.createElement("tr");
		var tCell = document.createElement("td");
		tCell.colSpan = 3;
		var btnRefresh = document.createElement("input");
		btnRefresh.type = "button";
		btnRefresh.value = "Refrescar lista";
		Event.observe(btnRefresh, 'click', this.on_click_refresh_btn.bindAsEventListener(this), false);
		tCell.appendChild(btnRefresh);
		tRow.appendChild(tCell);
		tBodyUpload.appendChild(tRow);
		this.table.appendChild(tBodyUpload);		
		// LLISTA IMATGES
		this.tBodyImList = document.createElement("tbody");		
		this.table.appendChild(this.tBodyImList);
		this.element.appendChild(this.table);
	},
	
	render_image_list: function()
	{
		this.tBodyImList.innerHTML = "";
		var index = 0;	
		while (index < this.div_img_array.length) 
		{
			var tRow = document.createElement("tr");			
			for(var col = 0; col < this.options.n_img_per_row; ++col)
			{
				var tCell = document.createElement("td");
				if (index < this.div_img_array.length)
				{
					tCell.appendChild(this.div_img_array[index]);
					++index;
				}
				tRow.appendChild(tCell);
								
			}
			this.tBodyImList.appendChild(tRow);
		}
	},
	
	// helpers
	create_new_div_img: function(a_filename)
	{
		var div_img = document.createElement("div");
		div_img.style.padding = "5px";
		//div_img.style.backgroundColor = '#CCCCCC';
		var img = document.createElement("img");
		img.width = this.options.img_max_width;
		img.src = this.base_img_path + a_filename;
		div_img.appendChild(img);
		
		Event.observe(div_img, 'mouseover', this.on_hover_div_img.bindAsEventListener(this), false);
		Event.observe(div_img, 'mouseout', this.on_hout_div_img.bindAsEventListener(this), false);
		Event.observe(div_img, 'click', this.on_click_div_img.bindAsEventListener(this), false);
		// estil				
		return div_img;
	},
	
	on_hover_div_img: function(evt)
	{
		var div = evt.currentTarget;
		if (div != this.current_div_img)
			div.style.backgroundColor = '#CCCCCC';
	},
	
	on_hout_div_img: function(evt)
	{
		var div = evt.currentTarget;
		if (div != this.current_div_img)
			div.style.backgroundColor = '#FFFFFF';
	},
	
	on_click_div_img: function(evt)
	{
		var div = evt.currentTarget;
		this.set_curent_div_img(div);
	},
	
	set_curent_div_img: function(a_div)
	{
		if (this.current_div_img != null)
			this.current_div_img.style.backgroundColor = '#FFFFFF';
		this.current_div_img = a_div;
		this.current_div_img.style.backgroundColor = '#666666';
		this.current_img_filename = this.get_current_img_filename();
	},
	
	get_current_img_filename: function()
	{
		var path = this.current_div_img.firstChild.src;
		var arr_aux = path.split("/");
		return arr_aux[arr_aux.length - 1];
	},
	
	on_click_upload_btn: function(evt)
	{		
		var ops = {
			//css_form_items: 'botons',
			//css_text: 'text',
			stmt_on_close: "Element.hide('"+ this.divUpload.id +"');"
			//stmt_after_upload_on_ok: "on_catalogo_recibido"
		};
		var uploader = new CocoAjaxUploader(this.divUpload.id + "_obj", this.path + '/', ops);
		uploader.show(this.divUpload);
	},
	
	on_click_refresh_btn: function(evt)
	{		
		this.load_img_array();
	}
	
	
	
	
};