var Block = new Class.create({

	id:null,
	cssId:null,
	canBeUpdated:false,
	
	initialize: function(id,cssId,canBeUpdated){
		this.id = id;
		this.cssId = cssId;
		this.canBeUpdated = canBeUpdated;
	}
	
});

var Field = new Class.create({

	fieldId:null,
	cssId:null,
	blockId:null,
	
	initialize: function(fieldId,cssId,blockId){
		this.fieldId = fieldId;
		this.cssId = cssId;
		this.blockId = blockId;		
	}
	
});

var PageDesigner = new Class.create({

	blockList: null,
	actionFile: 'web/_page_editor_renderer.php',
	pageId: null,
	pageCssId: null,
	selectedBlock: null,
	noElementsInPageMessage: '',
	nothingSelectedMessage: '',
	undoManager: null,
	blocks:null,
	fields: null,
	numBlocks: 0,
	documentSaved:true,
	inDesignMode: false,

	init: function(pageId,nothingSelectedMessage,noElementsInPageMessage)	{
		
		this.pageId = pageId;
		this.nothingSelectedMessage = '<p style="text-align:center;font-family: \'Lucida Grande\';font-size: 19px;color: grey;margin: 40px;">' + nothingSelectedMessage + '</p>';
		this.noElementsInPageMessage = '<p style="text-align:center;font-family: \'Lucida Grande\';font-size: 19px;color: grey;font-style: normal;margin: 40px;">' + noElementsInPageMessage + '</p>';
		
		this.undoManager = new UndoManager('pageDesigner');
		document.observe('ws:undomanager',function(){ pageDesigner.updateUndoButtons(); });
		

		hudWindowManager.addHUDWindow('blocks',localizedString.get('Elements'),'250px','250px');


		hudWindowManager.getHUDWindow('blocks').setOnStart(function(){ resizerManager.disableAllMouseOver(); });
		hudWindowManager.getHUDWindow('blocks').setOnEnd(function(){ resizerManager.enableAllMouseOver(); pageDesigner.saveWindowPosition('blocks'); });
		
		hudWindowManager.getHUDWindow('blocks').setContentPadding('10px','10px');
		
		hudWindowManager.getHUDWindow('blocks').setContent(this.noElementsInPageMessage);
		
		hudWindowManager.addHUDWindow('info',localizedString.get('Properties'),'350px','','300px');
		hudWindowManager.getHUDWindow('info').setContent(this.nothingSelectedMessage);
		
		hudWindowManager.getHUDWindow('info').hide();

		hudWindowManager.getHUDWindow('info').setOnStart(function(){ resizerManager.disableAllMouseOver(); });
		hudWindowManager.getHUDWindow('info').setOnEnd(function(){ resizerManager.enableAllMouseOver(); pageDesigner.saveWindowPosition('info'); });
		
		viewportPlacer.place('info','right','bottom');
				

		// hudWindowManager.getHUDWindow('blocks').setContentWithURL(system.getLibraryPath() + 'web/_page_editor_renderer.php'
		// 			,{ command: 'printBlocks',pageId: pageId, style: system.getCurrentStyle() });
			
		hudWindowManager.getHUDWindow('blocks').hide();
		
		document.observe('ws:css_changed',function(event) {
			if (!event.memo.dontUpdateResizer){
				if (resizerManager.getResizer(event.memo.fieldId)){
					resizerManager.getResizer(event.memo.fieldId).update();					
				}
			}
		});

		Event.observe(document,'ws:hudwindow_changed_visibility',function (event){
			pageDesigner.updateWindowIcons();
		});
		
		Event.observe(document,'ws:block_css_changed',function (event){
			
			if (event.memo.id=='designPageContainer'){
					document.fire('ws:css_changed',{ fieldId: event.memo.id,cssId: pageDesigner.cssId, dontUpdateResizer: true });				
			}
			else {
				var blockId = event.memo.id.substr(9);

				var block = pageDesigner.getBlock(blockId);
				if (block){
					document.fire('ws:css_changed',{ fieldId: event.memo.id,cssId: block.cssId, dontUpdateResizer: true });				
				}				
			}
		});
		
		document.observe('ws:block_resized',function(event) {
			if (event.memo.id){
				pageDesigner.updateBlockContent(event.memo.id);
			}
		});
		

		viewportPlacer.place('blocks','right','top');
		if ($('blocks').style.top){
			$('blocks').style.top = (parseInt($('blocks').style.top) + 60) + 'px';			
		}

		if ($('info').style.top){
			$('info').style.top = (parseInt($('info').style.top) - 20) + 'px';
		}
		
		this.updateBlockList();
		this.updateWindowIcons();
		
		Event.observe(document,'click',function(){ pageDesigner.clearSelection(); });

		var ctrlPressed = false;
		var shiftPressed = false;
		var cmdPressed = false;

		Event.observe(document,'keydown',function(event){ 
			if(event.which==17) ctrlPressed=false;
			if(event.which==16) shiftPressed = false;
			if (system.isCommandKey(event)) cmdPressed = false;
		});
		
		
		Event.observe(document,'keydown',function(event){
			
			if (event.keyCode==17) { // Ctrl
				ctrlPressed = true;
			}
			
			if (event.keyCode==16) { // Shift
				shiftPressed = true;
			}
			
			if (system.isCommandKey(event)) { // Cmd
				cmdPressed = true;
			}
		
			if (event.keyCode==27) { // Esc
				pageDesigner.clearSelection(); 
			}
			
			pressed = false;
			if (ctrlPressed || cmdPressed){
				pressed = true;
			}
			
			if ((event.keyCode==90) && pressed) {
				if (shiftPressed) pageDesigner.undoManager.redo();
				else pageDesigner.undoManager.undo();
			}
		});
		
			
		this.blocks = new Object();
		this.numBlocks = 0;

		this.fields = new Object();
		this.numFields = 0;
		
		hudWindowManager.getHUDWindow('blocks').setPosition('fixed');
		hudWindowManager.getHUDWindow('info').setPosition('fixed');

		// Event.observe(document,'keydown',function(event){ 
		// 		if (event.keyCode==27) { // Esc
		// 			pageDesigner.clearSelection(); 
		// 		}
		// 		else if (event.keyCode==37){ // Left Arrow
		// 			//alert('left');
		// 			if (event.shiftKey){
		// 				pageDesigner.moveLeftFast();
		// 			}
		// 			else {
		// 				pageDesigner.moveLeft();
		// 			}
		// 
		// 		}
		// 		else if (event.keyCode==38){ // Up Arrow
		// 			//alert('up');
		// 			if (event.shiftKey){
		// 				pageDesigner.moveUpFast();
		// 			}
		// 			else {
		// 				pageDesigner.moveUp();
		// 			}
		// 		}
		// 		else if (event.keyCode==39){ // Right Arrow
		// 			//alert('right');
		// 			if (event.shiftKey){
		// 				pageDesigner.moveRightFast();	
		// 			}
		// 			else {
		// 				pageDesigner.moveRight();
		// 			}
		// 		}
		// 		else if (event.keyCode==40){ // Down Arrow
		// 			//alert('down');
		// 			if (event.shiftKey){
		// 				pageDesigner.moveDownFast();
		// 			}
		// 			else {
		// 				pageDesigner.moveDown();
		// 			}
		// 		}
		// 	});
		
	},
	
	getSelectedId: function(){
		if (this.selectedBlock=='designPageContainer'){
			return this.selectedBlock;
		}
		else {
			if (this.selectedBlock){
				return (this.getBlockFieldId(this.selectedBlock));
			}
		}
		return this.selectedBlock;
	},
	
	moveLeft: function(){

		if (!this.selectedBlock) return;
		
		if (this.selectedBlock=='designPageContainer'){
			if (resizerManager.getResizer(this.selectedBlock)){
				resizerManager.getResizer(this.selectedBlock).moveLeft();
			}
		}
		else {
			if (resizerManager.getResizer(this.getBlockFieldId(this.selectedBlock))){
				if (resizerManager.getResizer(this.getBlockFieldId(this.selectedBlock))){
					resizerManager.getResizer(this.getBlockFieldId(this.selectedBlock)).moveLeft();
				}				
			}
		}
		
	},
	
	moveRight: function(){

		if (!this.selectedBlock) return;
		
		if (this.selectedBlock=='designPageContainer'){
			if (resizerManager.getResizer(this.selectedBlock)){
				resizerManager.getResizer(this.selectedBlock).moveRight();
			}
		}
		else {
			if (resizerManager.getResizer(this.getBlockFieldId(this.selectedBlock))){
				if (resizerManager.getResizer(this.getBlockFieldId(this.selectedBlock))){
					resizerManager.getResizer(this.getBlockFieldId(this.selectedBlock)).moveRight();
				}				
			}
		}
		
	},
	
	moveUp: function(){

		if (!this.selectedBlock) return;
		
		if (this.selectedBlock=='designPageContainer'){
			if (resizerManager.getResizer(this.selectedBlock)){
				resizerManager.getResizer(this.selectedBlock).moveUp();
			}
		}
		else {
			if (resizerManager.getResizer(this.getBlockFieldId(this.selectedBlock))){
				if (resizerManager.getResizer(this.getBlockFieldId(this.selectedBlock))){
					resizerManager.getResizer(this.getBlockFieldId(this.selectedBlock)).moveUp();
				}				
			}
		}
		
	},
	
	moveDown: function(){

		if (!this.selectedBlock) return;
		
		if (this.selectedBlock=='designPageContainer'){
			if (resizerManager.getResizer(this.selectedBlock)){
				resizerManager.getResizer(this.selectedBlock).moveDown();
			}
		}
		else {
			if (resizerManager.getResizer(this.getBlockFieldId(this.selectedBlock))){
				if (resizerManager.getResizer(this.getBlockFieldId(this.selectedBlock))){
					resizerManager.getResizer(this.getBlockFieldId(this.selectedBlock)).moveDown();
				}				
			}
		}
		
	},
	
	setWindowPosition: function(id,left,top){
		
		if (!hudWindowManager.getHUDWindow(id)) return;
		
		if (!left){
			left = '50px';
		}
		
		if (!top){
			top = '100px';
		}
		
		hudWindowManager.getHUDWindow(id).setLeftPos(left);
		hudWindowManager.getHUDWindow(id).setTopPos(top);		
	},
	
	setWindowVisibility: function(id,visible){
		
		var panel = hudWindowManager.getHUDWindow(id);
		if (panel){
			if (visible){
				panel.show();
			}
			else {
				panel.hide();
			}
		}
		
		this.updateWindowIcons();
	},
	
	setWindowDepth: function(id,depth){
		var panel = hudWindowManager.getHUDWindow(id);
		if (panel){
			depthManagers['hudWindows'].setDepth(id,depth);
			//panel.style.zIndex = depth;
		}
	},
	
	saveWindowVisibility: function(id){
		var visible = 'true';
		if ($(id).style.display=='none'){
			visible = 'false';
		}
		
		new Ajax.Request(system.getLibraryPath() + this.actionFile, {
			method:'post',
			parameters:{ command: 'saveWindowVisibility',pageId: this.pageId,id: id,visible: visible, style: system.getCurrentStyle() },
			onSuccess: function(transport) {
			}
		});
	},
	
	saveWindowPosition: function(id){
		var depth = $(id).style.zIndex;
		new Ajax.Request(system.getLibraryPath() + this.actionFile, {
			method:'post',
			parameters:{ command: 'saveWindowPosition',pageId: this.pageId,id: id,left: $(id).style.left,top: $(id).style.top, depth: depth,style: system.getCurrentStyle() },
			onSuccess: function(transport) {
			}
		});
	},
	
	toggleBlockDesign: function(id){
		
		
		var designField = $('designButton_' + id);
		if (designField.className=='DesignButtonOff'){
			designField.className = 'DesignButton';
		}
		else {
			designField.className = 'DesignButtonOff';			
		}
		
		new Ajax.Request(system.getLibraryPath() + this.actionFile, {
			method:'post',
			parameters:{ command: 'toggleBlockDesign',pageId: this.pageId,blockId: id, style: system.getCurrentStyle() },
			onSuccess: function(transport) {
				pageDesigner.updateBlockList();
			}
		});

		// new Ajax.Request(system.getLibraryPath() + this.actionFile, {
		// 	method:'post',
		// 	parameters:{ command: 'start',pageId: this.pageId,id: id,left: $(id).style.left,top: $(id).style.top, depth: depth,style: system.getCurrentStyle() },
		// 	onSuccess: function(transport) {
		// 	}
		// });
	},
		
	update: function(pageId,cssId){
		this.pageId = pageId;
		this.cssId = cssId;
		this.updateBlockList();
		this.updateWindowIcons();
	},
	
	updateBlockList: function(){
		new Ajax.Request(system.getLibraryPath() + this.actionFile, {
			method:'post',
			parameters:{ command: 'printBlocks',pageId: this.pageId, style: system.getCurrentStyle() },
			onSuccess: function(transport) {
				pageDesigner.updateBlockListContent(transport.responseText);
			}
		});
		
	},
	
	updateBlockListContent: function(text){
		
		this.blockList = text.evalJSON();
		
		var rawList = "";
		
				
		for (var blockIndex in this.blockList){
			
			var designField = "";
			if (this.blockList[blockIndex].design=='off'){
				designField = '<div id="designButton_' + this.blockList[blockIndex].id + '" onclick="pageDesigner.toggleBlockDesign(\'' + this.blockList[blockIndex].id + '\');event.cancelBubble = true;return false;" title="' + localizedString.get("Press to start designing this block manually") + '" class="DesignButton" ></div>';
			}
			else if (this.blockList[blockIndex].design=='on'){
				designField = '<div id="designButton_' + this.blockList[blockIndex].id + '" onclick="pageDesigner.toggleBlockDesign(\'' + this.blockList[blockIndex].id + '\');event.cancelBubble = true;return false;" title="' + localizedString.get("Press to remove the manual design") + '" class="DesignButtonOff"></div>';
			}
			/*else {
				designField = '<div title="' + localizedString.get("This block does not support manual design") + '" class="DesignDisabledButton"></div>';
			}*/
						
			if (parseInt(blockIndex)==0) {
				rawList += "<div class=\"hudItem\" id=\"designPageContainer_blockListItem\" style=\"padding: 2px;padding-top: 3px;padding-left: 10px;cursor: pointer;\" onclick=\"pageDesigner.selectBlock('designPageContainer');\">" + this.blockList[0].type + "</div>";
			}
			else if (parseInt(blockIndex)>0) {
				rawList += "<div class=\"hudItem\" id=\"" + this.blockList[blockIndex].id + "_blockListItem\" style=\"top: 2px;padding: 2px;padding-top: 3px;font-style: bold;padding-left: 15px;cursor: pointer;\" onclick=\"pageDesigner.selectBlock('" + this.blockList[blockIndex].id + "');\">· " + this.blockList[blockIndex].type + designField + "</div>";				
				
				if (this.blockList[blockIndex].designFields.length>0){
					for (var fieldIndex in this.blockList[blockIndex].designFields) {
						if (parseInt(fieldIndex)>=0){
							var field = this.blockList[blockIndex].designFields[fieldIndex];

							rawList += "<div class=\"hudItem\" id=\"" + field.fieldId + "_blockListItem\" style=\"top: 2px;padding: 2px;padding-top: 3px;font-style: bold;padding-left: 30px;cursor: pointer;\" onclick=\"pageDesigner.selectField('" + field.fieldId + "','" + field.cssId + "','" + this.blockList[blockIndex].id + "');\">- " + field.name + "</div>";							
						}
					}
				}

			}
		}
		
		hudWindowManager.getHUDWindow('blocks').setContent(rawList);
		
	},
	
	selectField: function(fieldId,cssId,blockId){
		depthManagers['blocks'].addField(fieldId);
		
		resizerManager.addResizer(fieldId,true);
		
		resizerManager.getResizer(fieldId).clickCallback = function (){
			pageDesigner.selectField(fieldId,cssId,blockId);
		};
		
		resizerManager.getResizer(fieldId).setUndoManager(pageDesigner.undoManager);
		
		resizerManager.getResizer(fieldId).dragCallback = function (){
			document.fire('ws:field_moved',{ fieldId: fieldId });
		};
		
		resizerManager.getResizer(fieldId).endDragCallback = function (){
			document.fire('ws:css_changed',{ cssId: cssId,fieldId: fieldId });
		};
		
		editableCSSManager.addEditable(fieldId,cssId);
		editableCSSManager.editable(cssId).setUndoManager(pageDesigner.undoManager);
		
		pageDesigner.addField(fieldId,cssId);
		
		resizerManager.removeResizer(blockId);
		
		if (this.selectedBlock==fieldId) return;

		this.clearSelection();
		// if (this.selectedBlock){
		// 	//resizerManager.removeResizer('webBlock_' + this.selectedBlock);
		// 	if (resizerManager.getResizer('webBlock_' + this.selectedBlock)){
		// 		resizerManager.getResizer('webBlock_' + this.selectedBlock).hideHandles();	
		// 	}
		// 
		// 	if ($(this.selectedBlock + '_blockListItem')){
		// 		$(this.selectedBlock + '_blockListItem').className = 'hudItem';
		// 	}			
		// }

		this.selectedBlock = fieldId;
		if ($(this.selectedBlock + '_blockListItem')){
			$(this.selectedBlock + '_blockListItem').className = 'hudSelectedItem';
		}
		
		//resizerManager.addResizer('webBlock_' + id);
		if (resizerManager.getResizer(fieldId)){
			resizerManager.getResizer(fieldId).showHandles();			
		}

		document.observe('ws:block_moved',function(event){ if (resizerManager.getResizer(event.memo.fieldId)) { resizerManager.getResizer(event.memo.fieldId).update(); } });

		hudWindowManager.getHUDWindow('info').setContentWithURL(system.getLibraryPath() + this.actionFile
			,{ command: 'printCssEditor',pageId: this.pageId,fieldId:fieldId,cssId: cssId, style: system.getCurrentStyle() });
	},
	
	updateUndoButtons: function(){
	
		var undoIcon = $('UndoToolbarIcon');
		var revertIcon = $('RevertToolbarIcon');
			
		if (this.undoManager.canUndo()){
			if (undoIcon) undoIcon.className = 'ToolbarIcon';
			if (revertIcon) revertIcon.className = 'ToolbarIcon';
		}
		else {
			if (undoIcon) undoIcon.className = 'ToolbarIconDisabled';
		}
		
		var redoIcon = $('RedoToolbarIcon');
		if ( (redoIcon) && (this.undoManager.canRedo()) ){
			redoIcon.className = 'ToolbarIcon';
		}
		else {
			redoIcon.className = 'ToolbarIconDisabled';
		}
		
		this.documentSaved = false;
	},
	
	clearSelection: function(){
		
		var callback = function(){
			pageDesigner.performClearSelection();
		};

		var previousSelection = this.selectedBlock;

		var backCallback = function(){
			pageDesigner.performSelectBlock(previousSelection);
		};

		this.undoManager.appendCommand(new CallbackCommand('clear selection',callback,backCallback));
		
		this.performClearSelection();
	},
	
	performClearSelection: function(){
		if (this.selectedBlock){

			if (this.selectedBlock=='designPageContainer'){
				if (resizerManager.getResizer('designPageContainer')) {
					resizerManager.getResizer('designPageContainer').hideHandles();					
				}
			}
			else {
				if (resizerManager.getResizer('webBlock_' + this.selectedBlock)){
					resizerManager.getResizer('webBlock_' + this.selectedBlock).hideHandles();
				}
			}

			if ($(this.selectedBlock + '_blockListItem')){
				$(this.selectedBlock + '_blockListItem').className = 'hudItem';
			}

			hudWindowManager.getHUDWindow('info').setContent(this.nothingSelectedMessage);
			this.selectedBlock = null;
		}
		
		colorPickerManager.hideAll();
	},
	
	selectBlock: function(id){
		
		if (this.selectedBlock==id) return;

		var callback = function(){
			pageDesigner.performSelectBlock(id);
		};
		
		var previousSelection = this.selectedBlock;
		
		var backCallback = function(){
			pageDesigner.performSelectBlock(previousSelection);
		};
		
		this.undoManager.appendCommand(new CallbackCommand('selection',callback,backCallback));
		
		this.performSelectBlock(id);
		
	},
	
	
	performSelectBlock: function(id){
		
		if (this.selectedBlock==id) return;
		
		var previousSelection = this.selectedBlock;

		this.performClearSelection();
		
		if (!id) return;
		
		this.selectedBlock = id;
		if ($(this.selectedBlock + '_blockListItem')){
			$(this.selectedBlock + '_blockListItem').className = 'hudSelectedItem';
		}

		if (id=='designPageContainer'){
			if (resizerManager.getResizer(id)){
				//resizerManager.setUndoManager(this.undoManager);
				
				resizerManager.getResizer(id).showHandles();
			}
			
			document.observe('ws:block_moved',function(event){ if (resizerManager.getResizer(event.memo.fieldId)) { resizerManager.getResizer(event.memo.fieldId).update(); } });
			
			hudWindowManager.getHUDWindow('info').setContentWithURL(system.getLibraryPath() + this.actionFile
					,{ command: 'printPageInfo',pageId: this.pageId, style: system.getCurrentStyle() });
		}
		else {
			
			//resizerManager.addResizer('webBlock_' + id);
			if (resizerManager.getResizer(this.getBlockFieldId(id))){
				resizerManager.getResizer(this.getBlockFieldId(id)).showHandles();			
			}

			hudWindowManager.getHUDWindow('info').setContentWithURL(system.getLibraryPath() + this.actionFile
				,{ command: 'printCssEditor',pageId: this.pageId,blockId: id, style: system.getCurrentStyle() });
		}
		
		
	},
	
	getBlockFieldId: function(id){
		return 'webBlock_' + id;
	},
	
	getBlockId: function(fieldId){
		return fieldId.substr(9);
	},
	
	addBlock: function(id,cssId,canBeUpdated){
		this.blocks[id] = new Block(id,cssId,canBeUpdated);
		this.numBlocks++;
		
		// TODO Meter aquí la creación del resizer, del editableCSS y demás
	},
	
	getBlock: function(id){
		return this.blocks[id];
	},
	
	updateBlockContent: function(fieldId){
		
		var field = $(fieldId);
		var blockId = this.getBlockId(fieldId);
		
		var block = this.blocks[blockId];
		
		if (!block.canBeUpdated) return;
		
		var width = field.offsetWidth;
		var height = field.offsetHeight;

		var progressIcon = system.getLoadingIcon();
		field.innerHTML = '<div style="height: 100px;"><img style="display:table;margin-top:50px;margin-left:auto;margin-right:auto;" title="' + localizedString.get('Loading data...') + '" src="' + progressIcon + '"/></div>';
		
		new Ajax.Request(system.getLibraryPath() + this.actionFile, {
			method:'post',
			parameters:{ command: 'updateBlockContent',pageId: this.pageId, style: system.getCurrentStyle(),blockId:blockId,width:width,height:height },
			onSuccess: function(transport) {
				field.innerHTML = transport.responseText;
				system.evalAllScripts(field);
			}
		});
	},
	
	removeBlock: function(id){
		
	},
	
	addField: function(fieldId,cssId,blockId){
		this.fields[fieldId] = new Field(fieldId,cssId,blockId);
		this.numFields++;
		
		// TODO Meter aquí la creación del resizer, del editableCSS y demás
	},
	
	removeField: function(id){
		
	},
	
	updateBlocksIcon: function(){
		var visible = hudWindowManager.getHUDWindow('blocks').isVisible();
		// if (reverse) visible = !visible;
		
		if (visible){
			$('BlocksToolbarIcon').className = 'ToolbarIconPushed';
		}
		else {
			$('BlocksToolbarIcon').className = 'ToolbarIcon';
		}
	},
	
	toggleBlocks: function(){
	 	hudWindowManager.getHUDWindow('blocks').toggle();
		this.updateBlocksIcon();
	},
	
	updatePropertiesIcon: function(){
		
		var visible = hudWindowManager.getHUDWindow('info').isVisible();

		if (visible){
			$('PropertiesToolbarIcon').className = 'ToolbarIconPushed';
		}
		else {
			$('PropertiesToolbarIcon').className = 'ToolbarIcon';
		}		
	},
	
	toggleProperties: function(){
		hudWindowManager.getHUDWindow('info').toggle();
		this.updatePropertiesIcon();
	},
	
	updateWindowIcons: function(){
		this.updateBlocksIcon();
		this.updatePropertiesIcon();
	},
	
	resetDesign: function() {
		var designIcon = $('DesignToolbarIcon');
		
		if (!pageDesigner.inDesignMode){
			return;
		}
					
		if (confirm(localizedString.get('Are you sure you want to revert to the original state? All the changes will be lost.'))){
			new Ajax.Request(system.getLibraryPath() + this.actionFile, {
				method:'post',
				parameters:{ command: 'resetPageDesign',pageId: this.pageId, style: system.getCurrentStyle() },
				onSuccess: function(transport) {
					var designIcon = $('ResetDesignToolbarIcon');
					designIcon.className == 'ToolbarIconOff';

					pageDesigner.updatePage();
					pageDesigner.undoManager.reset();
				}
			});
		}
	},
	
	toggleDesign: function() {
		//var design = 'true';
		
		new Ajax.Request(system.getLibraryPath() + this.actionFile, {
			method:'post',
			parameters:{ command: 'togglePageDesignMode',pageId: this.pageId, style: system.getCurrentStyle() },
			onSuccess: function(transport) {
				var designIcon = $('DesignToolbarIcon');
				if (pageDesigner.inDesignMode){
					
					$('ResetDesignToolbarIcon').hide();
					
					// $('DesignOnToolbarTitle').show();
					// $('DesignOffToolbarTitle').hide();

					$('RevertToolbarIcon').hide();
					$('UndoToolbarIcon').hide();
					$('RedoToolbarIcon').hide();
					
					hudWindowManager.getHUDWindow('blocks').hide();
					hudWindowManager.getHUDWindow('info').hide();
					
					$('BlocksToolbarIcon').hide();
					$('PropertiesToolbarIcon').hide();

					// $('DesignTitle').hide();
					// 					$('PreviewTitle').show();
					
					resizerManager.removeResizer('designPageContainer');

					//design = 'false';
				}
				else {

					$('ResetDesignToolbarIcon').show();
					// $('DesignOnToolbarTitle').hide();
					// $('DesignOffToolbarTitle').show();


					$('RevertToolbarIcon').show();
					$('UndoToolbarIcon').show();
					$('RedoToolbarIcon').show();
					$('BlocksToolbarIcon').show();
					$('PropertiesToolbarIcon').show();
					
					// $('DesignTitle').show();
					// 					$('PreviewTitle').hide();

					editableCSSManager.addEditable('designPageContainer',pageDesigner.cssId);
					editableCSSManager.editable(pageDesigner.cssId).setUndoManager(pageDesigner.undoManager);
					
					hudWindowManager.getHUDWindow('blocks').setOnStart(function(){ resizerManager.disableAllMouseOver(); });
					hudWindowManager.getHUDWindow('blocks').setOnEnd(function(){ resizerManager.enableAllMouseOver(); pageDesigner.saveWindowPosition('blocks'); });

					hudWindowManager.getHUDWindow('info').setOnStart(function(){ resizerManager.disableAllMouseOver(); });
					hudWindowManager.getHUDWindow('info').setOnEnd(function(){ resizerManager.enableAllMouseOver(); pageDesigner.saveWindowPosition('info'); });

					//design = 'true';
				}
				pageDesigner.inDesignMode = !pageDesigner.inDesignMode;
				pageDesigner.updatePage();
			}
		});
	},
	
	updatePage: function(){
		new Page(system.getLibraryPath() + this.actionFile,{ command: 'printPage',style: system.getCurrentStyle(),pageId: this.pageId },'designPageContainer');
	},
	
	revert: function(){
		this.undoManager.revert();
		var revertIcon = $('RevertToolbarIcon');
		revertIcon.className = 'ToolbarIconDisabled';
		this.updateUndoButtons();
	},
	
	saveState: function(){
		
		//editableCSSManager.editable().saveCss();
		
		// TODO Implementar esto
		if (this.numBlocks>0){
			for (var key in this.blocks){
				editableCSSManager.editable(this.blocks[key].cssId).saveCss();
			}
		}
		
		this.documentSaved = true;
	}
		
});


var pageDesigner = new PageDesigner();