// DO NOT INCREASE THIS VALUE. XAJAX ONLY ALLOWS: OBJECT TO XML: maxDepth = 20, maxSize = 2000
var cells_width = 40; 
var cells_height = 40;

function clearAll() {

	document.getElementById("css-x-DownloadIcon").innerHTML="";
	document.getElementById("css-x-PreviewIcon").innerHTML="";
	
	for(i=1;i<=cells_height;i++) {
		for (n=1;n<=cells_width;n++){
		
			block = Math.ceil(i/26); // 26 represents the number of alfabet characters
			block_code = block +96;
			char_code = (i-((block-1)*26)) +96;
			cell = String.fromCharCode(block_code) + String.fromCharCode(char_code) + n;			
			
			eval('document.getElementById("' + cell + '").style.backgroundImage="none";');
	        eval('document.getElementById("' + cell + '").style.backgroundColor="#FFFFFF"');
	        eval('document.iconInputForm.' + cell + '.value ="#FFFFFF"');
		}			
	}
}

function setBackgroundColor() {
	color_cell_value = getSelectedColor();
	if (color_cell_value == "#FFFFFE") {
		for(i=1;i<=cells_height;i++) {
			for (n=1;n<=cells_width;n++){
				block = Math.ceil(i/26); // 26 represents the number of alfabet characters
				block_code = block +96;
				char_code = (i-((block-1)*26)) +96;
				cell = String.fromCharCode(block_code) + String.fromCharCode(char_code) + n;	
						
				eval('document.getElementById("' + cell + '").style.backgroundImage="url(\'../../images/services/transparent.gif\')";');
		        eval('document.iconInputForm.' + cell + '.value ="' + color_cell_value + '"');
			}			
		}
	} else {	
		for(i=1;i<=cells_height;i++) {
			for (n=1;n<=cells_width;n++){
				block = Math.ceil(i/26); // 26 represents the number of alfabet characters
				block_code = block +96;
				char_code = (i-((block-1)*26)) +96;
				cell = String.fromCharCode(block_code) + String.fromCharCode(char_code) + n;				
			
				eval('document.getElementById("' + cell + '").style.backgroundImage="none";');
		        eval('document.getElementById("' + cell + '").style.backgroundColor="' + color_cell_value + '"');
		        eval('document.iconInputForm.' + cell + '.value ="' + color_cell_value + '"');
			}			
		}
	}	
}


function clearColor() {		
	colorBox = document.getElementById('colorPreview');
	colorBox.style.background = '#FFFFFF';

	colorText = document.getElementById("css-x-ColorPreviewText");
	colorText.innerHTML = '#FFFFFF';
}

function setPreviewColorBox(color) {
	if (color == "#FFFFFE") {
		colorBox = document.getElementById("colorPreview");
		colorBox.style.backgroundImage="url('../../images/services/transparent.gif')";
		colorText.innerHTML = "Transparent";
	} else {
		colorBox = document.getElementById("colorPreview");
		colorBox.style.background = color;
		colorText = document.getElementById("css-x-ColorPreviewText");
		colorText.innerHTML = color;
	}
}

function setSelectedColorBox(color) {
	if (color == '#FFFFFE') {
		document.iconInputForm.colorSelectedDisplay.style.backgroundImage="url('../../images/services/transparent.gif')";
		document.iconInputForm.colorSelected.value = color;
		colorText = document.getElementById("colorSelectedText");
		colorText.innerHTML = "Transparent";		
	} else {
		document.iconInputForm.colorSelectedDisplay.style.backgroundImage="none";
		document.iconInputForm.colorSelected.value = color;
		document.iconInputForm.colorSelectedDisplay.style.backgroundColor = color;
		colorText = document.getElementById("colorSelectedText");
		colorText.innerHTML = color;
	}
}


function drawCellByMovement(e) {
	var targ;
	if (!e) var e = window.event;
	if (e.target) targ = e.target;
	else if (e.srcElement) targ = e.srcElement;
	/* defeat Safari bug */
	if (targ.nodeType == 3) 
		targ = targ.parentNode;
	if(e.shiftKey) {
		color_cell_value = getSelectedColor();
		setSelectedColor(targ.id, color_cell_value);
	}
}


function drawCellByClick(e) {
	var targ;
	if (!e) var e = window.event;
	if (e.target) targ = e.target;
	else if (e.srcElement) targ = e.srcElement;
	/* defeat Safari bug */
	if (targ.nodeType == 3) 
		targ = targ.parentNode;

	/* Get cell color */
	if(e.ctrlKey) {
		color_cell_value = getCellColor(targ.id);
		setColorPicker(color_cell_value);
	} else {			
		color_cell_value = getSelectedColor();
		setSelectedColor(targ.id, color_cell_value);
	}
}

function initialise() {
	for(i = 1; i <= cells_height; i++) {
		for(n=1; n <= cells_width; n++) {
			
			block = Math.ceil(i/26); // 26 represents the number of alfabet characters
			block_code = block +96;
			char_code = (i-((block-1)*26)) +96;
			cell = String.fromCharCode(block_code) + String.fromCharCode(char_code) + n;					
			
			d = document.getElementById(cell);
			/* W3C */
			if(d.addEventListener) {
				d.addEventListener("mouseover", drawCellByMovement, false);
				d.addEventListener("click", drawCellByClick, false);
			/* W3C */
			} 
			if (d.attachEvent){
				d.attachEvent("onmouseover", drawCellByMovement);
				d.attachEvent("onclick", drawCellByClick, false);
			}		
		}
	}
}

function getSelectedColor() {			
	color_cell_value = document.iconInputForm.colorSelected.value;
	return color_cell_value;
}

function setSelectedColor(icon_cell_id, color_cell_value) {	
	
	if (color_cell_value == "#FFFFFE") {
		eval('document.getElementById("' + icon_cell_id + '").style.backgroundImage="url(\'../../images/services/transparent.gif\')";');
    	eval('document.iconInputForm.' + icon_cell_id + '.value = \'' + color_cell_value + '\';');
	
	} else {
		eval('document.getElementById("' + icon_cell_id + '").style.backgroundImage="none";');
		eval('document.getElementById("' + icon_cell_id + '").style.backgroundColor="' + color_cell_value + '"');
    	eval('document.iconInputForm.' + icon_cell_id + '.value = \'' + color_cell_value + '\';');
	}	
}	


function getCellColor(icon_cell_id) {	
	color_cell_value =  eval('document.iconInputForm.' + icon_cell_id + '.value;');
	if (color_cell_value == -1) {
		color_cell_value = '#FFFFFF';	
	}
	return color_cell_value;
}	

function setColorPicker(color_cell_value) {
	color_picker_size = 12*19;

	if (color_cell_value == "#FFFFFE") {	
		setSelectedColorBox('#FFFFFE');
		val = color_picker_size-1;
		eval('document.iconInputForm.selected' + val + '.value=\'FFFFFE\';');	
		eval('document.iconInputForm.color[' + val + '].checked=true');

	} else {	
		for(i=0;i<color_picker_size;i++) {
		    color = eval('document.iconInputForm.selected' + i + '.value;');
			if (color_cell_value == '#' + color) {	
				eval('document.iconInputForm.selected' + i + '.value=\'' + color + '\';');	
				eval('document.iconInputForm.color[' + i + '].checked=true');	
				setSelectedColorBox('#' + color);
			}
		}	
	}
}


function moveDrawing(choice) {
	arr = new Array();
	temp = new Array();
	start_shift = 0;
	shift_value = 0;	
	count = 0;
	color_cell_value = getSelectedColor();

	for(i=1;i<=cells_height;i++) {
		for (n=1;n<=cells_width;n++){
		
			block = Math.ceil(i/26); // 26 represents the number of alfabet characters
			block_code = block +96;
			char_code = (i-((block-1)*26)) +96;
			cell = String.fromCharCode(block_code) + String.fromCharCode(char_code) + n;			
		
	        color = eval('document.iconInputForm.' + cell + '.value');
			arr[count] = color;
			temp[count] = color; 
			count++;
		}			
	}

	switch (choice) {
	  case 'l':
	  		start_shift = cells_width;
			shift_value = 1;
	        break;
	  case 'r': 
	  		start_shift = 1;
			shift_value = -1;
	        break;
	  case 'd':
	  		start_shift = 1;
			shift_value = -1 * cells_width;	  
	  		break;
	  case 'u':
	  		start_shift = cells_height;
			shift_value = cells_width;	 	  
	  		break;
	}		

	count = 0;
	for (i=1;i<=cells_height;i++) {
		for (n=1;n<=cells_width;n++) {
			if (choice == 'l' || choice == 'r') {
				if (n==start_shift) {
					color = color_cell_value;
				} else {
					color = temp[count+shift_value];
				}
			}	
			if (choice == 'u' || choice == 'd') {
				if (i==start_shift) {
					color = color_cell_value;
				} else {
					color = temp[count+shift_value];
				}
			}					
			arr[count] = color; 
			count = count + 1;	
		}
	}
	
	count = 0;
	for(i=1;i<=cells_height;i++) {
		for (n=1;n<=cells_width;n++){
		
			block = Math.ceil(i/26); // 26 represents the number of alfabet characters
			block_code = block +96;
			char_code = (i-((block-1)*26)) +96;
			cell = String.fromCharCode(block_code) + String.fromCharCode(char_code) + n;	

			setSelectedColor(cell, arr[count]);
			count++;
		}			
	}	
	
}


function flipDrawing(choice) {
	var arr = new Array();
	var temp = new Array();

	count = 0;
	for(i=1;i<=cells_height;i++) {
		for (n=1;n<=cells_width;n++){
		
			block = Math.ceil(i/26); // 26 represents the number of alfabet characters
			block_code = block +96;
			char_code = (i-((block-1)*26)) +96;
			cell = String.fromCharCode(block_code) + String.fromCharCode(char_code) + n;	
					
	        color = eval('document.iconInputForm.' + cell + '.value');
			arr[count] = color;
			count = count + 1;
		}			
	}

	if (choice == 'h') {	
		for (i=1;i<=cells_height;i++) {
			index = (i-1)*cells_width;	
			part = new Array((arr.slice(index,index+cells_width)).reverse()); 
			temp.push(part);
		}		
	}
	
	if (choice == 'v') {	
		for (i=cells_height;i>=1;i--) {
			index = (i-1)*cells_width;	
			part = new Array(arr.slice(index,index+cells_width)); 
			temp.push(part);
		}		
	}		
	
	arr=(temp.toString()).split(",");
	 
	count = 0;
	for(i=1;i<=cells_height;i++) {
		for (n=1;n<=cells_width;n++){
		
			block = Math.ceil(i/26); // 26 represents the number of alfabet characters
			block_code = block +96;
			char_code = (i-((block-1)*26)) +96;
			cell = String.fromCharCode(block_code) + String.fromCharCode(char_code) + n;	
					
			setSelectedColor(cell, arr[count]);
			count = count + 1;
		}			
	}		
}

/*
function preview() {
	strPreview = '<table width="'+ cells_width +'" style="margin: 16px;"; border="0" cellspacing="0" cellpadding="0">';
	for (i=1;i<=cells_height;i++) {
		strPreview += "<tr height='1'>";
		for (n=1;n<=cells_width;n++) {
			block = Math.ceil(i/26); // 26 represents the number of alfabet characters
			block_code = block +96;
			char_code = (i-((block-1)*26)) +96;
			cell = String.fromCharCode(block_code) + String.fromCharCode(char_code) + n;	

	     	color = eval('document.iconInputForm.' + cell + '.value');
			strPreview += "<td width='1' style='background-color:"+ color+"';>";	
			strPreview += "</td>";
		}
		strPreview += "</tr>";	
	}
	strPreview += "</table>";		
	previewBox = document.getElementById("previewIconDisplay");
	previewBox.innerHTML = strPreview;
}
*/

function rotateDrawing() {
	var arr = new Array();
	var temp = new Array();

	count = 0;
	for(i=1;i<=cells_height;i++) {
		for (n=1;n<=cells_width;n++){
		
			block = Math.ceil(i/26); // 26 represents the number of alfabet characters
			block_code = block +96;
			char_code = (i-((block-1)*26)) +96;
			cell = String.fromCharCode(block_code) + String.fromCharCode(char_code) + n;	
					
			//cell = String.fromCharCode(i+96)+n;
	        color = eval('document.iconInputForm.' + cell + '.value');
			temp[cell] = color;
			count = count + 1;
		}			
	}

	count = 0;
	for(n=cells_width;n>=1;n--) {
		for (i=1;i<=cells_height;i++){
		
			block = Math.ceil(i/26); // 26 represents the number of alfabet characters
			block_code = block +96;
			char_code = (i-((block-1)*26)) +96;
			cell = String.fromCharCode(block_code) + String.fromCharCode(char_code) + n;	

			arr[count] = temp[cell];
			count = count + 1;
		}			
	}		
	
	count = 0;
	for(i=1;i<=cells_height;i++) {
		for (n=1;n<=cells_width;n++){
		
			block = Math.ceil(i/26); // 26 represents the number of alfabet characters
			block_code = block +96;
			char_code = (i-((block-1)*26)) +96;
			cell = String.fromCharCode(block_code) + String.fromCharCode(char_code) + n;	
					
			setSelectedColor(cell, arr[count]);
			count = count + 1;
		}			
	}		
	
}