Ajax = function (url) {
	this.query = function (params) {
        var data = '';//'q='+encodeURIComponent(q);
		for (key in params)
			data += key+'='+encodeURIComponent(params[key])+'&';
        ajax.setRequestHeader('Content-length', data.length );
        ajax.send(data);
	}
	
	this.setCallback200 = function (cb) {
		_callback200 = cb;
	}
	
	/* CONSTRUCTOR */
	
	var _callback200 = null;
	
	var ajax = null;
	try { // Firefox, Opera 8.0+, Safari
		ajax = new XMLHttpRequest();
	} catch (e) { // Puto y pestilente Internet Explorer
		try {
			ajax = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			ajax = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}

	ajax.open('POST', url, true);
	ajax.setRequestHeader('Connection', 'close');
	ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	ajax.onreadystatechange = function () {
		if (ajax.readyState == 4) {
			if (ajax.status == 200) {
				if (_callback200!=null)
					_callback200(ajax.responseText);
			}
		}
	}
}

newLabel = function (dom) {

	var edit_id = dom.getAttribute('edit_id');
	if (edit_id != null) {
		dom.setAttribute('contentEditable', 'true');
		dom.addEventListener('blur', function(event) {
			dom.style.border = 'solid orange 1px';
			var ajax = new Ajax('/__ajax__/Label/set_label');
			ajax.setCallback200(function(text){
				dom.style.border = '';
			});
			ajax.query({'id':edit_id,'text':this.innerHTML});
			
		}, true);
	}

	dom.parentNode.setAttribute('href', '#');

}

window.addEventListener('load', function(event) {
	var elements = document.getElementsByTagName('*');
	var cadena;
	for (key in elements) {
		cadena = elements[key].id;
		if (typeof(cadena)=='string') {
			var id = parseInt(cadena.replace('Label', ''));
			if (!isNaN(id)) {
				newLabel(elements[key]);
			}
		}
	}
}, true);var images_offset = 40;
var images_increment = 20;

function loadMore() {
	var bmf = document.getElementById('button-more-frame');


	bmf.setAttribute('loading', 'true');
	var ajax = new Ajax('/__ajax__/Home/load_more');
	ajax.setCallback200(function(text){
		json = eval('('+text+')');
		for (var i in json) {
			var col = document.getElementById('v-col-'+i);
			col.innerHTML += json[i];
//			alert(i);
		}
//		alert(text);
		setTimeout(function(){
			bmf.setAttribute('loading', 'false');			
		}, 1000);
	});
	ajax.query({'offset':images_offset});
	images_offset += images_increment;
}


newGraphicPopup = function() {
	var dom = document.createElement('div');
	dom.className = 'graphicPopup';

	var frame = document.createElement('div');
	dom.appendChild(frame);
	frame.className = 'graphicPopup-frame';

	var content = document.createElement('div');
	frame.appendChild(content);
	content.className = 'graphicPopup-content';

	var buttons = document.createElement('div');
	frame.appendChild(buttons);
	buttons.className = 'graphicPopup-buttons';

	var button_accept = document.createElement('button');
	buttons.appendChild(button_accept);
	button_accept.className = 'shadow-button shadow-button-blue';
	button_accept.innerHTML = 'Aceptar';

	var button_close = document.createElement('button');
	buttons.appendChild(button_close);
	button_close.className = 'shadow-button shadow-button-red';
	button_close.innerHTML = 'Cerrar';
	button_close.addEventListener('click', function(event){
		dom.hide();
	}, false);

	dom.show = function() {
		dom.style.display = 'block';
		frame.style.marginLeft = '-'+frame.clientWidth/2+'px'
		frame.style.marginTop = '-'+frame.clientHeight/2+'px'
	}

	dom.setCallback = function(fun) {
		button_accept.addEventListener('click', fun, true);

	}

	dom.hide = function() {
		dom.style.display = 'none';
	}

	dom.appendContent = function(elem) {
		content.appendChild(elem);
	}

	dom.style.display = 'none';
	document.body.appendChild(dom);

	return dom;
}


newGraphicInputButton = function(name) {
	var dom = document.createElement('div');
	dom.className = 'comGraphicInputButton';

	var inputdiv = document.createElement('div');
	inputdiv.className = 'inputdiv';

	var input = document.createElement('input');
	inputdiv.appendChild(input);
	
	var button = document.createElement('button');
	button.className = 'shadow-button';
	button.innerHTML = name;


	dom.appendChild(button);
	dom.appendChild(inputdiv);

	input.addEventListener('keyup', function(event){
		if (this.value == '') {
			button.className = 'shadow-button';
		} else {
			button.className = 'shadow-button shadow-button-blue';
		}
	}, true);


	dom.input = input;
	dom.button = button;

	return dom;
}

newGraphicList = function() {
	var dom = document.createElement('div');

	var callback_delete = null;
	var callback_click = null;

	var selected_item = null;
	var item_click_select = function(event) {
		dom.select(this.id);
	};

	dom.setDocked = function(val) {
		if (val) {
			dom.className = 'graphicList graphicList-docked';
		} else {
			dom.className = 'graphicList';
		}
	};

	dom.setDocked(true);

	var search_box = newGraphicInputButton('Search');
	search_box.className += ' graphicList-searchBox';
	dom.appendChild(search_box);

	var list_box = document.createElement('div');
	list_box.className = 'graphicList-listBox';
	dom.appendChild(list_box);

	var new_box = newGraphicInputButton('New');
	new_box.className += ' graphicList-newBox';
	dom.appendChild(new_box);

	// Estilos iniciales:
	// - Para el cuadro de búsqueda:
	search_box.style.display = 'none';
	list_box.style.top = '0px';
	// - Para crear nuevo
	new_box.style.display = 'none';
	list_box.style.bottom = '0px';

	dom.remove = function(id) {
		var childs = list_box.childNodes;
		for(key in childs) {
			if (childs[key].id == id) {
				list_box.removeChild(childs[key]);
			}
		}
	}

	dom.add = function (id, label) {
		var list_item = document.createElement('div'); list_box.appendChild(list_item);
		list_item.className = 'graphicList-listItem';
		list_item.id = id;

		var list_item_button = document.createElement('button'); list_item.appendChild(list_item_button);
		list_item_button.id = id;
		list_item_button.className = 'graphicList-listItem-Button';
		list_item_button.innerHTML = label;
		list_item_button.addEventListener('click', item_click_select, true);
		list_item.button = list_item_button;

		// Añado el evento click
		if (callback_click != null)
			list_item_button.addEventListener('click', callback_click, false);

		// Añado el evento delete
		if (callback_delete != null) {
			var list_item_delete = document.createElement('button'); list_item.appendChild(list_item_delete);
			list_item_delete.id = id;
			list_item_delete.className = 'graphicList-listItem-Delete';
			list_item_delete.addEventListener('click', callback_delete, true);
		}

	};

	dom.setCallbackSearch = function(callback) {
		search_box.input.addEventListener('keyup', function(event) {callback(event, search_box.input.value);}, true);
		search_box.button.addEventListener('click', function(event) {callback(event, search_box.input.value);}, true);
		search_box.style.display = '';
		list_box.style.top = ''; // search_box.clientHeight+'px';
	};

	dom.setCallbackNew = function(callback) {
		new_box.button.addEventListener('click', function(event) {callback(event, new_box.input.value); new_box.input.value = '';}, true);
		new_box.style.display = '';
		list_box.style.bottom = ''; // search_box.clientHeight+'px';
	};

	dom.setCallbackClick = function(callback) {
		callback_click = callback;
	};

	dom.setCallbackDelete = function(callback) {
		callback_delete = callback;
	};

	dom.clear = function() {
		// TODO: poner seleccionado = null
		list_box.innerHTML = '';
	};

	dom.select = function (id) {
		if (selected_item != null)
			selected_item.className = 'graphicList-listItem';
		
		var childs = list_box.childNodes;
		for(key in childs) {
			if (childs[key].id == id) {
				selected_item = childs[key];
				selected_item.className = 'graphicList-listItem graphicList-listItem-selected';
			}
		}
	};

	dom.getSelectedId = function() {
		return selected_item.id;
	};

	dom.getSelected = function() {
		return selected_item;
	};

	dom.search_box = search_box;
	dom.list_box = list_box;
	dom.new_box = new_box;

	return dom;
}



var newGraphicPopupImage = function() {

	var dom = newGraphicPopup();
	var callback_image = null;

	var panel = document.createElement('div');
	panel.className = 'panel-insert-image';
	dom.appendContent(panel);

	var panel_left = document.createElement('div');
	panel_left.className = 'panel-left';
	panel.appendChild(panel_left);

	var panel_right = document.createElement('div');
	panel_right.className = 'panel-right';
	panel.appendChild(panel_right);

	var image_sources = newGraphicList();
	image_sources.setDocked(false);
	panel_left.appendChild(image_sources);

	image_sources.setCallbackClick(function(event) {
		sources[this.id]();
	});

	image_sources.add(1, 'Buscar en mi disco duro');
	//image_sources.add(2, 'Pegar URL http://...');
	image_sources.add(3, 'Mis imágenes');
	//image_sources.add(5, 'Búsqueda en Google');

	dom.setCallback (function(event) {
		sources_callback[image_sources.getSelectedId()]();
	});

	dom.setCallbackImage = function(cb) {
		callback_image = cb;
	};

	var sources = new Array();
	var sources_callback = new Array();


	// Source 1: A file from HDD
	var input_file;
	var form;
	var iframe_id = 'upload_image_from_hdd'+(new Date()).getTime();
	var iframe_target = 'target'+(new Date()).getTime();
	sources[1] = function() {
		panel_right.innerHTML = 'Selecciona una imagen jpeg/png desde tu disco duro:<br><br>';
		var g = document.createElement('div'); panel_right.appendChild(g);
		g.innerHTML = '<iframe id="'+iframe_id+'" style="display:none;" name="'+iframe_target+'"></iframe>';
		var iframe;
		form = document.createElement('form'); panel_right.appendChild(form);
		form.target = iframe_target;
		form.action = '/__ajax__/GraphicPopupImage/upload_image_from_hdd';
		form.method = 'post';
		form.enctype = 'multipart/form-data';
		input_file = document.createElement('input'); form.appendChild(input_file);
		input_file.type = 'file';
		input_file.name = 'image';

	};

	sources_callback[1] = function() {
		if (input_file.files[0].type != 'image/png' && input_file.files[0].type != 'image/jpeg' && input_file.files[0].type != 'image/gif' ) {
			alert('Debe seleccionar una imagen válida');
		} else {
			form.submit();
			// ANIMACIÓN DE ENVIANDO...
			iframe = document.getElementById(iframe_id);
			iframe.addEventListener('load', function(event) {
				dom.hide();
				// Actualizo la imagen si lo que me devuelve es mayor de cero
				var text = this.contentDocument.body.innerHTML;
				// Devuelvo el resultado json evaluado
				var image = eval('('+text+')');
				if (callback_image != null) {
					callback_image(image);
				}
			}, true);
		}
	}

	// Source 2: A file from url
	sources[2] = function() {
		panel_right.innerHTML = 'A partir de una URL :)';
	};

	sources_callback[2] = function() {
		alert('TODO: File from url');
	}

	// Source 3: My images
	var s3_div1;
	var s3_selected = null;
	var s3_click=function(event) {
		if (s3_selected != null)
			s3_selected.className = '';
		s3_selected = this;
		s3_selected.className = 's3_selected';
	};
	var s3_dblclick=function(event) {
		if (s3_selected != null)
			s3_selected.className = '';
		s3_selected = this;
		s3_selected.className = 's3_selected';
		dom.hide();
		if (callback_image != null) {
			callback_image({'id':s3_selected.image_id});
		}
	};
	sources[3] = function() {
		s3_selected = null;
		panel_right.innerHTML = '';

		s3_div1 = document.createElement('div'); panel_right.appendChild(s3_div1);
		s3_div1.className = 'source-3';

		var ajax = new Ajax('/__ajax__/GraphicPopupImage/load_my_images');
		ajax.setCallback200(function(text){
			var json = eval('('+text+')');
			for (key in json) {
				var img = document.createElement('img');
				img.image_id = json[key];
				img.addEventListener('click', s3_click, true);
				img.addEventListener('dblclick', s3_dblclick, true);
				img.src = '/img/'+json[key];
				s3_div1.appendChild(img);
			}
		});
		ajax.query({});
	};

	sources_callback[3] = function() {
		dom.hide();
		if (callback_image != null) {
			callback_image({'id':s3_selected.image_id});
		}
	}


	// Source 5: My images
	sources[5] = function() {
		panel_right.innerHTML = 'Búsqueda en Google';
	};

	sources_callback[5] = function() {
		alert('TODO: File from url');
	}



	image_sources.select(1);
	sources[1]();

	return dom;
}

newImage = function (dom) {

	var edit_id = dom.getAttribute('edit_id');
	if (edit_id != null) {
		//dom.setAttribute('contentEditable', 'true');
		dom.addEventListener('dblclick', function(event) {
			var gpi = newGraphicPopupImage();
			gpi.setCallbackImage(function(image) {
				dom.src='/img/'+image.id;
				var ajax = new Ajax('/__ajax__/Image/set_image');
				ajax.query({'id_image_instance':edit_id,'id_image':image.id});
			});
			gpi.show();
		}, true);
	}

	dom.parentNode.setAttribute('href', '#');

}

window.addEventListener('load', function(event) {
	var elements = document.getElementsByTagName('*');
	var cadena;
	for (key in elements) {
		cadena = elements[key].id;
		if (typeof(cadena)=='string') {
			var id = parseInt(cadena.replace('Image', ''));
			if (!isNaN(id)) {
				newImage(elements[key]);
			}
		}
	}
}, true);function yellow_menu_expand(categoria) {
	var abuelo = categoria.parentNode.parentNode;
	for (i=0; i<abuelo.childNodes.length; i++) {
		abuelo.childNodes.item(i).setAttribute('opened', 'false');
	}
	categoria.parentNode.setAttribute('opened', 'true');
}



SimpleTextFonts = ['NeutraText-Bold', 'ACaslonPro-Italic', 'CaeciliaLTStd-Light', 'CaeciliaLTStd-LightItalic'];
SimpleTextFonts = ['Raleway','Noticia Text','sans-serif', 'mono', ''];


window.addEventListener('load', function(event){
	var elements = document.getElementsByTagName('*');
	var cadena;
	var docs = [];
	for (key in elements) {
		cadena = elements[key].id;
		if (typeof(cadena)=='string') {
			var id = parseInt(cadena.replace('SimpleText', ''));
			if (!isNaN(id))
				docs[id] = elements[key];
		}
	}
	for (key in docs) 
		newSimpleText(docs[key]).loadDocument(key);
	
}, true);


var newSimpleText = function(dom) {

	var toolbar = document.createElement('div');
	toolbar.className = 'simpletext-toolbar';

	var group1 = document.createElement('div'); toolbar.appendChild(group1);
	group1.className = 'simpletext-group';
	// Negrita
	var button1 = document.createElement('button'); group1.appendChild(button1);
	button1.className = 'icon-bold';
	button1.addEventListener('mousedown', function(event){
		document.execCommand('bold', false, null);
	}, true);
	// Cursiva
	var button2 = document.createElement('button'); group1.appendChild(button2);
	button2.className = 'icon-italic';
	button2.addEventListener('mousedown', function(event){
		document.execCommand('italic', false, null);
	}, true);
	// Subrayado
	var button3 = document.createElement('button'); group1.appendChild(button3);
	button3.className = 'icon-underline';
	button3.addEventListener('mousedown', function(event){
		document.execCommand('underline', false, null);
	}, true);
	// Tachado
	var button4 = document.createElement('button'); group1.appendChild(button4);
	button4.className = 'icon-strike';
	button4.addEventListener('click', function(event){
		document.execCommand('strikeThrough', false, null);
	}, true);
	// Borrar formato
	var button9 = document.createElement('button'); group1.appendChild(button9);
	button9.className = 'icon-eraseformat';
	button9.addEventListener('click', function(event){
		document.execCommand('removeFormat', false, null);
	}, true);

	var group5 = document.createElement('div'); toolbar.appendChild(group5);
	group5.className = 'simpletext-group';
	var button12 = document.createElement('select'); group5.appendChild(button12);
	button12.addEventListener('click', function(event) {
		document.execCommand('fontName', false, button12.value);
		//document.execCommand('styleWithCSS', false, 'font-family:\''+button12.value+'\'');
		textarea.focus();
	}, true);

	for (s in SimpleTextFonts) {
		var option1 = document.createElement('option'); button12.appendChild(option1);
		option1.style.fontFamily = option1.innerHTML = option1.value = SimpleTextFonts[s];
		
	}


	var group4 = document.createElement('div'); toolbar.appendChild(group4);
	group4.className = 'simpletext-group';
	// Imagen
	var button10 = document.createElement('button'); group4.appendChild(button10);
	button10.className = 'icon-image';
	button10.addEventListener('mousedown', function(event){
		var gpi = newGraphicPopupImage();
		gpi.setCallbackImage(function(image) {
			document.execCommand('insertImage', false, '/img/'+image.id);
		});
		gpi.show();
	}, true);	
	// Enlace
	var button11 = document.createElement('button'); group4.appendChild(button11);
	button11.className = 'icon-hiperlink';
	button11.addEventListener('mousedown', function(event){
		var href = '';
		if (href = prompt("Message", "http://")) {
			document.execCommand('createLink', false, href);
		}
	}, true);	


	var group2 = document.createElement('div'); toolbar.appendChild(group2);
	group2.className = 'simpletext-group';
	// Lista normal
	var button5 = document.createElement('button'); group2.appendChild(button5);
	button5.className = 'icon-unorderedlist';
	button5.addEventListener('mousedown', function(event){
		document.execCommand('insertUnorderedList', false, null);
	}, true);	
	// Lista ordenada
	var button6 = document.createElement('button'); group2.appendChild(button6);
	button6.className = 'icon-orderedlist';
	button6.addEventListener('mousedown', function(event){
		document.execCommand('insertOrderedList', false, null);
	}, true);

	var group3 = document.createElement('div'); toolbar.appendChild(group3);
	group3.className = 'simpletext-group';
	// SUP
	var button7 = document.createElement('button'); group3.appendChild(button7);
	button7.className = 'icon-super';
	button7.addEventListener('mousedown', function(event){
		document.execCommand('superscript', false, null);
	}, true);	
	// INF
	var button8 = document.createElement('button'); group3.appendChild(button8);
	button8.className = 'icon-sub';
	button8.addEventListener('mousedown', function(event){
		document.execCommand('subscript', false, null);
	}, true);
	


	var textarea = document.createElement('div'); textarea.innerHTML = 'loading...';
	textarea.className = 'simpletext-textarea';
	textarea.focused = false;

	dom.innerHTML = '';
	dom.appendChild(toolbar);
	dom.appendChild(textarea);

	textarea.addEventListener('focus', function(event){
		textarea.focused = true;
		toolbar.style.display = 'block';
		toolbar.style.width = textarea.clientWidth+'px';
		toolbar.style.marginTop = '-'+toolbar.clientHeight+'px';
	}, true);

	textarea.addEventListener('blur', function(event) {
		textarea.style.border='solid orange 1px';
		textarea.style.margin='-1px';
		var ajax = new Ajax('/__ajax__/SimpleText/save_text');
		ajax.setCallback200(function(text){
			textarea.style.border='';
			textarea.style.margin='';
		});
		ajax.query({'id':id_text,'text':textarea.innerHTML});
	}, true);

	textarea.addEventListener('blur', function(event){
		textarea.focused = false;
		setTimeout(function(){if (!textarea.focused) toolbar.style.display = '';}, 500);
	}, true);

	var event_mouse_up = function(event){
		textarea.focus();
	};

	group1.addEventListener('mouseup', event_mouse_up, true);
	group2.addEventListener('mouseup', event_mouse_up, true);
	group3.addEventListener('mouseup', event_mouse_up, true);
	group4.addEventListener('mouseup', event_mouse_up, true);



	// CONSTRUCTOR:
	var id_text=0;

	dom.loadDocument = function(id) {
		id_text = id;
		var ajax = new Ajax('/__ajax__/SimpleText/load_text');

		// TODO: Bloquear edición de partes hasta que termine el proceso de carga
		ajax.setCallback200(function(text){
			textarea.innerHTML = text;
			textarea.setAttribute('contentEditable', true);
		});
		ajax.query({'id':id});
	}

	dom.getComponentVersion = function() {
		return '0.0.1';
	}


	return dom;
}