var isMouseDown = false;
 var isDragging = false;
 var cols = 6;
 var rows = 20;
 var paint_cols = 20;
 var total_cols = cols + paint_cols + 1;
 var cellsize = 5;
 var colors = new Object();
 var undo_stack = new Array();
 var cells = new Array();
 var farb = null;
/* var script_url = 'http://nilsliberg.se/vavning/bunden_rosengang.php';
 script_url = 'http://localhost:8080/'; */
 
 function clone(obj) {
	var newObj = (obj instanceof Array) ? [] : {};
	for (i in obj) {
		if (i == 'clone') continue;
		if (obj[i] && typeof obj[i] == "object") {
			newObj[i] = clone(obj[i]);
		} 
		else 
			newObj[i] = obj[i]
	}
	return newObj;
};
 
 function undo_push() {
	undo_stack.push(clone(colors));
 }
 
 function undo_pop() {
	if (undo_stack.length > 0) {
		colors = undo_stack.pop();
		rebuild();
	}
 }
 
 function get_cell(row, col) {
	var id = 'cell' + row + '_' + col;
	return $("#" + id);
 }
 
 function cellid_to_row(id) {
	return parseInt(id.split('_')[0].substring(4));
 }
 
 function cellid_to_col(id) {
	return parseInt(id.split('_')[1]);
 }
 
 function move_cell(id, dx, dy) {
	var row = cellid_to_row(id) + dy;
	var col = cellid_to_col(id) + dx;
	return 'cell' + row + '_' + col;
 } 
 
function move_cells(dx, dy) {
	undo_push();
	new_colors = new Object();
	for (var cell in colors) {
		var new_cell = move_cell(cell, dx, dy);
		new_colors[new_cell] = colors[cell];
	}	
	colors = new_colors;
	rebuild();
}

function fill_color() {
	undo_push();
	colors = new Object();
	for (var row=0; row<rows; row++) {			
		for (var col=0; col<cols; col++) {
			var id = 'cell' + row + '_' + col;
			colors[id] = farb.color;
		}
	}		
	//$('#pattern_name').val('');
	rebuild();
}

function repaint_right_side(changed_cell_id) {		
	var cell_row = null;	
	if (changed_cell_id != null) {
		cell_row = cellid_to_row(changed_cell_id);
	}
	
	if ($.browser.msie) {		
		for (var row=0; row<rows; row++) {	
			for (var paintcol=0; paintcol < paint_cols; paintcol++) {			
				if (row == cell_row || changed_cell_id == null) {
					col = paintcol % (2*cols);
					if (col >= cols)
						col = 2*cols-2 - col;
					if (col < 0 || col >= cols)
						col = cols-1;			
					var cell_src = get_cell(row, col);			
					var cell_trg = get_cell(row, cols + 1 + paintcol);				
					cell_trg.css('background-color', cell_src.css('background-color'));			
				}
			}
		} 
	}
		
	// update color palette
	var color_set = new Object();
	//$("#palette div").remove();
	$("#palette").html('<canvas height="30" width="100%" id="cv_palette"></canvas>');
	var i = 0;
	var ctx = null;
	if (!$.browser.msie) 		
		ctx = document.getElementById("cv_palette").getContext("2d");
	for (var cell in colors) {
		color_set[colors[cell]] = true;		
	}
	for (var color in color_set) {		
		$("#palette").append('<div style="background-color:' + color + '">' + color + '</div>');
		if (ctx != null) {
			ctx.fillStyle = color;
			ctx.fillRect(i * 30, 0, 25, 25);
			i++;
		}
	}	
	$("#palette div").bind('mousedown', onpaletteclick);	
	
	if (!$.browser.msie) 
		paint_grid(cell_row);
}
 
 
function paint_cell(cell_id) {
	var id = cell_id;
	var target = document.getElementById(cell_id);
	$(target).css('background-color', farb.color); 	
	if (farb.color != "#ffffff")
		colors[id] = farb.color;
	else
		delete colors[id];
	repaint_right_side(id);		
}
   
function rebuild() {		
	var string = new Array(); 
	if (!$.browser.msie) {
		string.push('<table class="grid"><tbody><tr>');
		string.push('<td style="vertical-align: top">  <canvas id="cv_draw"></canvas>  </td>');
		string.push('<td class="spacecell">' + '</td>');
		string.push('<td style="vertical-align: top">  <canvas id="cv"></canvas>  </td>');
		string.push('</tr></tbody></table>');
		$("#cells").html(string.join(""));
		$("#cv_draw").bind('mousedown', on_canvas_mousedown);    		
	}
	else {
		string.push('<table class="grid"><tbody>');
		for (var row=0; row<rows; row++) {
			string.push('<tr>');				
			for (var col=0; col<cols; col++) {
				var id = 'cell' + row + '_' + col;
				if (colors[id] != null)
					string.push('<td class="drawcell" id="' + id + '" style="background-color:' + colors[id] + '"></td>');
				else
					string.push('<td class="drawcell" id="' + id + '"></td>');
			}
			
			string.push('<td class="spacecell">' + '</td>');
			for (var col=0; col<paint_cols; col++) {
				var id = 'cell' + row + '_' + (col + cols);
				string.push('<td class="paintcell" id="' + id + '">' + '</td>');
			}
			string.push('</tr>');
		}			
		string.push('</tbody></table>');
		$("#cells").html(string.join(""));
		
		$(".drawcell").bind('click', oncellclick);		
		$(".drawcell").bind('mousedown', onmousedown_);    		
	}
	
	/*for (var row=0; row<rows; row++) {
		for (var col=0; col<cols; col++) {
			var id = 'cell' + row + '_' + col;
			if (colors[id] != null)
				$("#" + id).css('background-color', colors[id]);
		}
	}	*/		
	
		
	oncellsizechange(null);	
	repaint_right_side();		
	return false;
}

function oncellmouseup(event) {
	//repaint_right_side();
}

function onmouseup_(event) {
	// Uncapture mouse
	$(".drawcell").unbind('mousemove', onmousemove_);			
	$(document).unbind('mouseup', onmouseup_);
	$("#cv_draw").unbind('mousemove', on_canvas_mousemove);			
	isDragging = false;	
	isMouseDown = false; 
	//repaint_right_side();
}

function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
		return [curleft - window.pageXOffset,curtop - window.pageYOffset];
	}
}

function get_cell_color(id) {
	if (colors[id] == null)
		farb.setColor('#ffffff');
	else
		farb.setColor(colors[id]);
}

function on_canvas_mousedown(event) {
	//var offset = $(this).offset();
	//pos = findPos(this);		
	//var x = event.clientX - offset.left;//pos[0];
	//var y = event.clientY - offset.top;//pos[1];		
		
	isMouseDown = true;	
	on_canvas_mousemove(event);	
	
	// Capture mouse
	if (!isDragging) {
		$("#cv_draw").bind('mousemove', on_canvas_mousemove);			
		$(document).bind('mouseup', onmouseup_);
		isDragging = true;			
	}	
	return false;
}

function onmousedown_(event) {	
	isMouseDown = true;	
	$("#debug").val(event.button);	
	//paint_cell($(event.target).attr("id"));			
	onmousemove_(event);
	
	// Capture mouse
	if (!isDragging) {
		$(".drawcell").bind('mousemove', onmousemove_);			
		$(document).bind('mouseup', onmouseup_);
		isDragging = true;				
	}

	return false;
}

function onmousemove_(event) {
	var $thisCell, $tgt = $(event.target);		
	$("#debug").val(event.timeStamp + ', ' + event.which);
	//if ((event.button == 1 && window.event != null || event.shiftKey && window.event == null))	
		//$(event.target).css('background-color', $("#color").val()); 
	if (!isDragging)
		undo_push();		
	if (event.which == 1 || event.which == null)
		paint_cell($(event.target).attr("id"));
	else
		get_cell_color($(event.target).attr("id"));
}

function on_canvas_mousemove(event) {
	pos = findPos(event.target);	
	var x = event.clientX - pos[0];
	var y = event.clientY - pos[1];	
	var row = Math.floor(y / cellsize);
	var col = Math.floor(x / cellsize);
	var id = 'cell' + row + '_' + col;
	var target = document.getElementById(id);		
	if (!isDragging)
		undo_push();
	if (event.which == 1 || event.which == null)
		paint_cell(id);
	else
		get_cell_color(id);
}

function oncellclick(event) {	
	paint_cell($(event.target).attr("id"));
}

function onpaletteclick(event) {
	var color = $(event.target).text();		
	farb.setColor(color);
}

function onrowschange(event) {
	rows = parseInt($('#id_num_rows').val());
	rebuild();
}

function oncellsizechange(event) {
	cellsize = parseInt($('#cellsize').val());
	$('td').css('width', cellsize).css('height', cellsize);
	$('#cv').attr('width', paint_cols*cellsize + 1);
	$('#cv').attr('height', rows*cellsize + 1);
	$('#cv_draw').attr('width', cols*cellsize + 1);
	$('#cv_draw').attr('height', rows*cellsize + 1);
	repaint_right_side();
}

function oncolschange(event) {
	cols = parseInt($('#id_num_columns').val());
	total_cols = cols + paint_cols + 1;
	rebuild();
}

function onnumrepeatschange(event) {
	paint_cols = cols * parseInt($('#id_num_repeats').val());
	total_cols = cols + paint_cols + 1;
	rebuild();
}

/*function on_pattern_click(event) {
	var pattern_name = $(event.target).text();
	$.get(script_url + '?action=load&name=' + escape(pattern_name), function (data) { 	    
		data = $.secureEvalJSON(data);
		$("#pattern").val(data['pattern']);
		$('#pattern_name').val(data['name']);
		load_pattern();
	});	
	event.returnValue=false; 
	return false;
}*/

/*function on_pattern_delete_click(event) {
	var pattern_name = $(event.target).parent().children()[1].text;
	$.get(script_url + '?action=delete&name=' + escape(pattern_name), function (data) { 	    		
		update_pattern_list();
	});	
	event.returnValue=false; 
	return false;
}*/

function colors2text() {
	$("#id_pattern").val($.toJSON(colors));
}

function text2colors() {
	var pattern_text = $("#id_pattern").val()
	if (pattern_text)
	{
		new_colors = $.secureEvalJSON(pattern_text);	
		if (new_colors)	
			colors = new_colors;		
	}
}
/*
function save_pattern() {	
	var pattern = new Object();
	pattern.rows = rows;
	pattern.cols = cols;
	pattern.paint_cols = paint_cols;	
	pattern.colors = colors;	
	$("#pattern").val($.toJSON(pattern));
	
	var pattern_name = $('#pattern_name').val();
	var pattern = $("#pattern").val();
	$('#save_progress').show();
	var temp = {'action' : 'save', 'name': pattern_name, 'pattern': pattern};
	$.get(script_url, {'action' : 'save', 'name': pattern_name, 'pattern': pattern}, function (data) {		
		$('#save_progress').hide();
		update_pattern_list();
	});
}

function load_pattern() {
	var pattern = $.secureEvalJSON($("#pattern").val());
	if (pattern) {
		rows = pattern.rows;
		cols = pattern.cols;
		paint_cols = pattern.paint_cols;
		total_cols = cols + paint_cols + 1;
		colors = pattern.colors;
		rebuild();
	}
}*/

function paint_grid(cell_row) {
	var ctx = document.getElementById("cv").getContext("2d");	;
	var ctx_draw = document.getElementById("cv_draw").getContext("2d");	;
	var size = cellsize;	 
		
	ctx_draw.lineWidth = "0.7";
	ctx_draw.strokeStyle = "#ddd";	
	for (var row=0; row<rows; row++) {	
		if (row == cell_row || cell_row == null) {			
			//ctx.clearRect(0, row * cellsize, canvas.width, cellsize);
			for (var col=0; col < cols; col++) {
				var id = 'cell' + row + '_' + col;				
				ctx_draw.fillStyle = "#dddddd";				
				ctx_draw.fillRect(col * size, row * size, size+1, size+1);				
				if (colors[id] != null) 
					ctx_draw.fillStyle = colors[id];				
				else
					ctx_draw.fillStyle = "#ffffff";				
				ctx_draw.fillRect(col * size+1, row * size+1, size-1, size-1);				
			}
			for (var paintcol=0; paintcol < paint_cols; paintcol++) {
				col = paintcol % (2*cols);
				if (col >= cols)
					col = 2*cols-2 - col;
				if (col < 0 || col >= cols)
					col = cols-1;								
				var id = 'cell' + row + '_' + col;				
				if (colors[id] != null) 
					ctx.fillStyle = colors[id];				
				else
					ctx.fillStyle = "#ffffff";				
				ctx.fillRect(paintcol * size+1, row * size+1, size, size);				
			}
		}
	}
}

/*
function update_pattern_list() {
	$.get(script_url + '?action=list', function (data) {
		var name_list = $.secureEvalJSON(data);		
		var string = new Array();
		for (var name in $.secureEvalJSON(data))
			string.push('<img class="delete_pattern" src="delete.gif"><a href="#">' + name_list[name] + "</a><br>");
		$("#pattern_list").html(string.join(""));	    
		$("#pattern_list a").bind('click', on_pattern_click);	
		$("#pattern_list img").bind('click', on_pattern_delete_click);	
	});
}*/


 $(document).ready(function() {
	farb = $.farbtastic('#colorpicker', '#color');    
	farb.setColor("#ff0000");    
	$('#id_num_rows').bind('change', onrowschange);
	$('#id_num_columns').bind('change', oncolschange);
	$('#id_num_repeats').bind('change', onnumrepeatschange);    
	$('#cellsize').bind('change', oncellsizechange);
	//$('#pattern').bind('change', function (event) { load_pattern(); });    
	$('#pattern_name').val('');
	$('input[type=submit]#save').bind('submit', colors2text);
	$('form').submit(colors2text); 
	if ($('#id_num_rows').val())
		rows = $('#id_num_rows').val();
	if ($('#id_num_columns').val())
		cols = $('#id_num_columns').val();	
	if ($('#id_num_repeats').val())
		paint_cols = $('#id_num_repeats').val() * cols;	
	//$('form').bind('onsubmit', colors2text);
	text2colors();
	//update_pattern_list();
	rebuild();
});