var totalBlock        = new Array;
	var currentBlockID    = null;
	var positionedID      = new Array;
	var startPositioning  = new Array;	
	var positionedOptions = new Array;
	var themeBlockStyle	  = new Array;
	var currentTemplate	  = "";
	
	window.onload = blockStartPositioning;

	//This function update the preview template code
	//copyng from an HIDDEN DIV with preview code to main preview section
	function updatePreviewCode(dir){
		var container = document.getElementById(dir);
		var previewContainer = document.getElementById('pageStructureMainContainerPreview');
		previewContainer.innerHTML = container.innerHTML;
		clearPreviewCode();
		restoreBlockCss();
		cleanCurrentBlock();
		//blockStartPositioning();
		positionedID = new Array();
		currentBlockID = null;
		updateCurrentTemplate(dir);			
	}
	
	function updateCurrentTemplate(dir){
		var oldImg = document.getElementById('template_image_'+currentTemplate);
		if (oldImg != null)
			oldImg.style.borderBottom = "0px";
		currentTemplate = dir;
		var newImg = document.getElementById('template_image_'+currentTemplate);
		if (newImg != null)
			newImg.style.borderBottom = "2px solid #990000";		
	}
	
	//Setting the current block to block whit passed ID
	function updateCurrentBlock(id){
		id = id.match('[0-9]+'); //ID can be in the form of "container_XX"
		id = id[0];
		var blockTD = document.getElementById(id);
		var cc = blockTD.innerHTML;
		currentBlockTD = document.getElementById('pageStructureCurrentBlock');
		currentBlockTD.innerHTML = cc;
		currentBlockID = id;
		var optionTD = document.getElementById('pageStructureCurrentBlockOption');
		optionTD.innerHTML = buildOptionCode(id);
	}
	
	function buildOptionCode(blockID){
		var info = 'empty;0;0';
		if (positionedOptions[blockID] != undefined)
			info = positionedOptions[blockID];		
		else 
			positionedOptions[blockID] = info;		
		
		info = info.split(";");
		
		var opts = ""; 
		var selected = "";
		var l=themeBlockStyle.length;
		for (var i=0;i<l;i++){
			selected = "";
			if (themeBlockStyle[i] == info[0]){
				selected = ' selected="selected" ';
			}	
			opts += '<option value="'+themeBlockStyle[i]+'" '+selected+'>'+themeBlockStyle[i]+'</option>';
 	    }
 	    
		var check01 = check02 = "";
		if (info[1] == 1) check01 = 'checked="checked"';
		if (info[2] == 1) check02 = 'checked="checked"';
		
		var selectCode = '<select id="'+blockID+'_style" onChange="manageBlockStyleChange('+blockID+');" >'+opts+'</select>';
		tCode = '<table cellspagin="0" cellpadding="0" style="width:100%"><tr><td>Title:</td><td><input id="'+blockID+'_showtitle" type="checkbox" '+check01+' onChange="manageBlockStyleChange('+blockID+');" /><td rowspan="2">Style: <br />'+selectCode+'</td></tr><tr><td>Footer:</td><td><input id="'+blockID+'_showfooter" type="checkbox" '+check02+' onChange="manageBlockStyleChange('+blockID+');" /></tr></table>';
		return tCode;
	}
	
	function manageBlockStyleChange(blockID){
		var check01 = document.getElementById(blockID+'_showtitle');
		var check02 = document.getElementById(blockID+'_showfooter');
		var select  = document.getElementById(blockID+'_style');
		
		var c1 = (check01.checked) ? 1:0;
		var c2 = (check02.checked) ? 1:0;
		var c0 = select.childNodes[select.selectedIndex].value;
		positionedOptions[blockID] = c0+';'+c1+';'+c2;
	}
	
	//Clean current block
	function cleanCurrentBlock(id){
		currentBlockTD = document.getElementById('pageStructureCurrentBlock');
		if (currentBlockTD != null){
			currentBlockTD.innerHTML = "";
			currentBlockID = null;
		}
	}
	
	//Clean the Preview Code from "sectionXX" text
	function clearPreviewCode(){
		var table = document.getElementById('pageContentsTableManager');
		var tBody = table.childNodes[1];
		for (var i=0;i<tBody.childNodes.length;i++){
			if (tBody.childNodes[i].tagName == 'TR'){
				for (var j=0;j<tBody.childNodes[i].childNodes.length;j++){
					var innerTD = tBody.childNodes[i].childNodes[j];
					if (innerTD.nodeType == 3) continue;
					var innerSection = innerTD.innerHTML;
					innerSection = innerSection.replace('[[','');
					innerSection = innerSection.replace(']]','');
					innerTD.innerHTML = '<table class="sectionTrigger"><tr><td class="hikariHeadColumn" onClick="sectionPutBlock(\''+innerSection+'\');">'+innerSection+'</td></tr></table>';
				}
			}
		}
	}
	
	//Restore the base class of block list to prevent
	//the remaining of opacity
	function restoreBlockCss(){
		var l = totalBlock.length;
		for (var i=0;i<l;i++)
			document.getElementById(totalBlock[i]).className = 'pageStructureBlockToken';
	}
	
	function blockStartPositioning(){
		updateCurrentTemplate(currentTemplate);
		var l = startPositioning.length;
		for (var i=0;i<l;i++){
			var sectionTD = document.getElementById(startPositioning[i][0]);
			sectionTD.innerHTML = '<table class="sectionTrigger"><tr><td class="hikariHeadColumn" onClick="sectionPutBlock(\''+startPositioning[i][0]+'\');">'+startPositioning[i][0]+'</td></tr></table>';
			//sectionTD.innerHTML = "";
		}
		for (var i=0;i<l;i++){
			var sectionTD = document.getElementById(startPositioning[i][0]);			
			currentBlockID = startPositioning[i][1];			
			sectionPutBlock(startPositioning[i][0]);
		}
		cleanCurrentBlock();
	}
	
	function sectionPutBlock(sectionID){
		if (currentBlockID == null) return;
		var sectionTD = document.getElementById(sectionID);
		var blockTD = document.getElementById(currentBlockID);
		var cc = blockTD.innerHTML;
		//If block was already positioned, I have to move the block in the new section+
		//simpli killing the previous block
		if (positionedID.indexOf(currentBlockID) > -1){
			var oldBlockDIV = document.getElementById('container_'+currentBlockID);
			oldBlockDIV.parentNode.removeChild(oldBlockDIV);
		}
		
		positionedID.push (currentBlockID);		
		
		var blockDIVContainer = document.createElement('DIV');		
		blockDIVContainer.className = 'genericBlockIdContainer';
		blockDIVContainer.id = 'container_'+currentBlockID;
		blockDIVContainer.setAttribute('onClick','updateCurrentBlock(this.id)');
		
		var blockDIVOptions   = document.createElement('DIV');
		blockDIVOptions.className = "genericBlockIdOptions";
		
		blockDIVOptions.innerHTML = '<table cellspacing="1" cellpadding="0"><tr><td class="blockOptionUp" onClick="moveBlock(\'container_'+currentBlockID+'\',\'up\');">&nbsp;</td><td class="blockOptionDown" onClick="moveBlock(\'container_'+currentBlockID+'\',\'down\');">&nbsp;</td><td class="blockOptionClose" onClick="removeMe(\'container_'+currentBlockID+'\',\''+currentBlockID+'\');">&nbsp;</td></tr></table>';		
		var blockDIV = document.createElement('DIV');	
		blockDIV.className = 'genericBlockIdPositioned';
		
		blockDIV.id = currentBlockID+'_div';
		blockDIV.innerHTML = cc;
		
		blockDIVContainer.appendChild(blockDIVOptions);
		blockDIVContainer.appendChild(blockDIV);
		
		sectionTD.appendChild(blockDIVContainer);
		
		blockTD.className = 'pageStructureBlockTokenUsed';
	}
	
	function removeMe(blockID,id){
		var indexID = positionedID.indexOf(id);
		delete positionedID[indexID];
		var block = document.getElementById(blockID);
		block.parentNode.removeChild(block);
		var blockTD = document.getElementById(id);
		blockTD.className = 'pageStructureBlockToken';		
		cleanCurrentBlock();
	}
	
	function moveBlock(blockID,verse){
		var block = document.getElementById(blockID);
		var father = block.parentNode;		
		if (verse == "up" && block.previousSibling.tagName == 'TABLE') return;
		if (verse == "down" && father.lastChild == block) return;
		
		if (verse == "up"){
			var brother = block.previousSibling;			 
			father.removeChild(block);
			father.insertBefore(block,brother);
		}
		
		if (verse == "down"){
			var brother = block.nextSibling;
			father.removeChild(block);
			insertAfter(block,brother);
		}
		
		cleanCurrentBlock();
	}
	
	function insertAfter(newElement,targetElement) {
		var parent = targetElement.parentNode;	 
		if(parent.lastchild == targetElement) {
			parent.appendChild(newElement);
			} 
		 else {			
			parent.insertBefore(newElement, targetElement.nextSibling);
			}
	}
	
	function calculateAll(){
		var currentTemplateHidden = document.getElementById('hidden_selected_template');
		currentTemplateHidden.value = currentTemplate;
		
		var masterTable = document.getElementById('pageContentsTableManager');
		masterTable = masterTable.childNodes[1];
		
		var lim = masterTable.childNodes.length;
		var totalBlockInfo = new Array;
		for (var i=0;i<lim;i++){
			var row = masterTable.childNodes[i];
			if (row.nodeType == 1){
				var lim2 = row.childNodes.length;
				for (var j=0;j<lim2;j++){
					var col = row.childNodes[j];
					if (col.nodeType == 1){						
						totalBlockInfo.push(col.id+";"+analyzeCol(col).join(";"));
					}
				}
			}
		}
		var blockListHidden = document.getElementById('hidden_blockList');
		blockListHidden.value = totalBlockInfo.join("|");
		var blockStyleHidden = document.getElementById('hidden_blockStyle');
		lim = positionedOptions.length;
		var totalStyleStr = "";
		for (i=0;i<lim;i++){
			if (positionedOptions[i] != undefined){
				totalStyleStr += i+";"+positionedOptions[i]+"|";
			}
		}
		blockStyleHidden.value = totalStyleStr;		
		document.forms['total_template'].submit();
	}
	
	function analyzeCol(col){
		var lim = col.childNodes.length;
		var children = new Array;
		for (var i=0;i<lim;i++){
			var son = col.childNodes[i];
			if (son.tagName == "DIV"){
				id = son.id.match('[0-9]+'); //ID can be in the form of "container_XX"
				id = id[0];
				children.push(id);
			}
		}
		return children;
	}