var canvas;
var stat_timeout_id = 0;

var vflip = false;
var hflip = false;
var greyscale = false;
var g_r_visible = false;
var cropper_visible = false;

var cropper_border = 8;
var min_center_width = 60;
var min_center_height = 60;

var is_mouse_over = false;

var mouse_start_x;
var mouse_start_y;
var current_element;




function get_current_mods()
	{
	var mods_str = '';
	if(vflip)
		{
		mods_str += 'VFLIP();';
		}
	if(hflip)
		{
		mods_str += 'HFLIP();'
		}
	if(greyscale)
		{
		mods_str += 'GREYSCALE();';
		}
	if(g_r_visible)
		{
		mods_str += 'GR();';
		}
	if(cropper_visible)
		{
		var w = parseInt(w_td_elem.style.width) - cropper_border;
		var n = parseInt(n_td_elem.style.height) - cropper_border;
		var e = -(parseInt(e_td_elem.style.width) - cropper_border);
		var s = -(parseInt(s_td_elem.style.height) - cropper_border);
		mods_str += 'CROP(' + w + ',' + n + ',' + e + ',' + s + ');';
		}
	mods_str += '';
	return mods_str;
	}

function save(photo_id)
	{
	//var mods_str = Base64.encode(get_current_mods());
	var mods_str = get_current_mods();
	if(mods_str)
		{
		mods_str = '{{{' + mods_str + '}}}';
		var loc = url({p:'photo',c:'view',a:'comments',id:photo_id,comment_text:mods_str}) + '#post';
		window.location = loc;
		}
		else
			{
			alert('You have to do some changes in order to be able to suggest them.');
			}
	}

function load(image_element,photo_full,photo_full_grey,settings_str)
	{
	//var settings_str = '{{{VFLIP();HFLIP();GREYSCALE();GR();CROP(11,22,-33,-44);}}}';
	if(settings_str.match(/VFLIP\(\);/))
		{
		toggle_vflip(image_element);
		}
	if(settings_str.match(/HFLIP\(\);/))
		{
		toggle_hflip(image_element);
		}
	if(settings_str.match(/GREYSCALE\(\);/))
		{
		toggle_greyscale(photo_full,photo_full_grey);
		}
	if(settings_str.match(/GR\(\);/))
		{
		g_r_toggle();
		}
	var crop = settings_str.match(/.*CROP\((.*)\);/);
	if(crop)
		{
		var crop_coords = crop[1].split(',');
		cropper_toggle();
		var w = parseInt(crop_coords[0]);
		var n = parseInt(crop_coords[1]);
		var e = parseInt(crop_coords[2]);
		var s = parseInt(crop_coords[3]);
		w_resize(w);
		n_resize(n);
		e_resize(e);
		s_resize(s);
		}
	if(settings_str&&settings_str!='{{{}}}')
		{
		$('pic-suggest').style.backgroundPosition = 'center';
		}
	}

function image_restore(image_element)
	{
	hflip = false;
	vflip = false;
	greyscale = false;
	if(isIE)
		{
		image_element.src = original_src;
		image_element.style.filter = '';
		return;
		}
		else if(!isMozilla)
			{
			window.alert('Only Internet Explorer and Firefox/Mozilla are supported.');
			return false;
			}
	document.firstChild.nextSibling.firstChild.nextSibling.removeChild(canvas);
	canvas_init(image_element);
	if(cropper_visible)
		{
		cropper_toggle();
		}
	cropper_visible = false;
	if(g_r_visible)
		{
		g_r_toggle();
		}
	g_r_visible = false;
	
	$('pic-grid').style.backgroundPosition = '';
	$('pic-crop').style.backgroundPosition = '';
	$('pic-flip-v').style.backgroundPosition = '';
	$('pic-flip-h').style.backgroundPosition = '';
	$('pic-grayscale').style.backgroundPosition = '';
	$('pic-suggest').style.backgroundPosition = '';
	}

function canvas_init(image_element)
	{
	//if(!isIE)
	if(isMozilla)
		{
		canvas = document.createElement("CANVAS");
		canvas.width = image_element.width;
		canvas.height = image_element.height;
		canvas.style.position = 'absolute';
		canvas.style.left = getX(image_element) + 'px';
		canvas.style.top = getY(image_element) + 'px';
		canvas.style.zIndex = 3;
		document.firstChild.nextSibling.firstChild.nextSibling.appendChild(canvas);
		}
	}

function toggle_greyscale(photo_full,photo_full_grey)
	{
	if(isIE)
		{
		if(greyscale)
			{
			$('pic-grayscale').style.backgroundPosition = '';
			photo_full.src = original_src;
			greyscale = false;
			}
			else
				{
				$('pic-grayscale').style.backgroundPosition = 'center';
				photo_full.src = photo_full_grey.src;
				greyscale = true;
				}
		return;
		}
		else if(!isMozilla)
			{
			window.alert('Only Internet Explorer and Firefox/Mozilla are supported.');
			return false;
			}
	
	var context = canvas.getContext('2d');
	if(greyscale)
		{
		$('pic-grayscale').style.backgroundPosition = '';
		current_image_element = photo_full;
		greyscale = false;
		}
		else
			{
			$('pic-grayscale').style.backgroundPosition = 'center';
			current_image_element = photo_full_grey;
			greyscale = true;
			}
	var image_element = current_image_element;
	if(hflip)
		{
		if(vflip)
			{
			context.scale(1,1);
			context.drawImage(image_element, -image_element.width, -image_element.height, image_element.width, image_element.height);
			}
			else
				{
				context.scale(1,1);
				context.drawImage(image_element, -image_element.width, 0, image_element.width, image_element.height);
				}
		}
		else if(vflip)
			{
			if(hflip)
				{
				context.scale(1,1);
				context.drawImage(image_element, -image_element.width, -image_element.height, image_element.width, image_element.height);
				}
				else
					{
					context.scale(1,1);
					context.drawImage(image_element, 0, -image_element.height, image_element.width, image_element.height);
					}
			}
			else
				{
				context.drawImage(image_element, 0, 0);
				}
	}


function toggle_hflip(image_element)
	{
	if(isIE)
		{
		if(hflip)
			{
			$('pic-flip-h').style.backgroundPosition = '';
			hflip=false;
			if(vflip)
				{
				image_element.style.filter = 'flipv';
				}
				else
					{
					image_element.style.filter = '';
					}
			}
			else
				{
				$('pic-flip-h').style.backgroundPosition = 'center';
				hflip=true;
				if(vflip)
					{
					image_element.style.filter = 'fliph flipv';
					}
					else
						{
						image_element.style.filter = 'fliph';
						}
				}
		return;
		}
		else if(!isMozilla)
			{
			window.alert('Only Internet Explorer and Firefox/Mozilla are supported.');
			return false;
			}
	var context = canvas.getContext('2d');
	if(hflip)
		{
		$('pic-flip-h').style.backgroundPosition = '';
		hflip = false;
		if(vflip)
			{
			context.scale(-1,1);
			context.drawImage(image_element, 0, -image_element.height, image_element.width, image_element.height);
			}
			else
				{
				context.scale(-1,1);
				context.drawImage(image_element, 0, 0, image_element.width, image_element.height);
				}
		}
		else
			{
			$('pic-flip-h').style.backgroundPosition = 'center';
			hflip = true;
			if(vflip)
				{
				context.scale(-1,1);
				context.drawImage(image_element, -image_element.width, -image_element.height, image_element.width, image_element.height);
				}
				else
					{
					context.scale(-1,1);
					context.drawImage(image_element, -image_element.width, 0, image_element.width, image_element.height);
					}
			}
	}
	
function toggle_vflip(image_element)
	{
	if(isIE)
		{
		if(vflip)
			{
			vflip=false;
			$('pic-flip-v').style.backgroundPosition = '';
			if(hflip)
				{
				image_element.style.filter = 'flipv';
				}
				else
					{
					image_element.style.filter = '';
					}
			}
			else
				{
				vflip=true;
				$('pic-flip-v').style.backgroundPosition = 'center';
				if(hflip)
					{
					image_element.style.filter = 'flipv fliph';
					}
					else
						{
						image_element.style.filter += ' flipv';
						}
				}
		return;
		}
		else if(!isMozilla)
			{
			window.alert('Only Internet Explorer and Firefox/Mozilla are supported.');
			return false;
			}
	var context = canvas.getContext('2d');
	if(vflip)
		{
		$('pic-flip-v').style.backgroundPosition = '';
		vflip = false;
		if(hflip)
			{
			context.scale(1,-1);
			context.drawImage(image_element, -image_element.width, 0, image_element.width, image_element.height);
			}
			else
				{
				context.scale(1,-1);
				context.drawImage(image_element, 0, 0);
				}
		}
		else
			{
			$('pic-flip-v').style.backgroundPosition = 'center';
			vflip = true;
			if(hflip)
				{
				context.scale(1,-1);
				context.drawImage(image_element, -image_element.width, -image_element.height, image_element.width, image_element.height);
				}
				else
					{
					context.scale(1,-1);
					context.drawImage(image_element, 0, -image_element.height, image_element.width, image_element.height);
					}
			}
	}





function cropper_init(img_elem)
//function cropper_init()
	{
	cropper_elem = $('cropper');
	nw_td_elem = $('nw_td');
	n_td_elem = $('n_td');
	ne_td_elem = $('ne_td');
	w_td_elem = $('w_td');
	c_td_elem = $('c_td');
	e_td_elem = $('e_td');
	sw_td_elem = $('sw_td');
	s_td_elem = $('s_td');
	se_td_elem = $('se_td');
	
	
	cropper_elem.style.position = 'absolute';
	cropper_elem.style.left = parseInt(getX(img_elem)-cropper_border) + 'px';
	cropper_elem.style.top = parseInt(getY(img_elem)-cropper_border) + 'px';
	cropper_elem.style.zIndex = 4;
	
	cropper_elem.style.width = parseInt(cropper_width + cropper_border*2) + 'px';
	cropper_elem.style.height = parseInt(cropper_height + cropper_border*2) + 'px';
	
	cropper_elem.style.visibility = 'hidden';
	//cropper_elem.style.background = cropper_background;
	
	
	nw_td_elem.style.width = cropper_border + 'px';
	nw_td_elem.style.height = cropper_border + 'px';
	//nw_td_elem.style.background = cropper_background;
	//nw_td_elem.style.border = '1px solid #00FF00';
	n_td_elem.style.width = (cropper_width - 2*cropper_border) + 'px';
	n_td_elem.style.height = cropper_border + 'px';
	ne_td_elem.style.width = cropper_border + 'px';
	ne_td_elem.style.height = cropper_border + 'px';
	w_td_elem.style.width = cropper_border + 'px';
	w_td_elem.style.height = (cropper_height - 2*cropper_border) + 'px';
	c_td_elem.style.width = (cropper_width - 2*cropper_border) + 'px';
	c_td_elem.style.height = (cropper_height - 2*cropper_border) + 'px';
	//c_td_elem.style.background = 'transparent';
	e_td_elem.style.width = cropper_border + 'px';
	e_td_elem.style.height = (cropper_height - 2*cropper_border) + 'px';
	sw_td_elem.style.width = cropper_border + 'px';
	sw_td_elem.style.height = cropper_border + 'px';
	s_td_elem.style.width = (cropper_width - 2*cropper_border) + 'px';
	s_td_elem.style.height = cropper_border + 'px';
	se_td_elem.style.width = cropper_border + 'px';
	se_td_elem.style.height = cropper_border + 'px';
	}

function g_r_toggle()
	{
	if(g_r_visible)
		{
		$('pic-grid').style.backgroundPosition = '';
		$('g_r').style.visibility = 'hidden';
		g_r_visible = false;
		}
		else
			{
			$('pic-grid').style.backgroundPosition = 'center';
			$('g_r').style.visibility = 'visible';
			g_r_visible = true;
			}
	}

function cropper_toggle()
	{
	if(!isMozilla&&!isIE)
		{
		window.alert('Only Internet Explorer and Firefox/Mozilla are supported.');
		return false;
		}
	if(cropper_visible)
		{
		$('pic-crop').style.backgroundPosition = '';
		cropper_elem.style.visibility = 'hidden';
		cropper_visible = false;
		}
		else
			{
			$('pic-crop').style.backgroundPosition = 'center';
			cropper_elem.style.visibility = 'visible';
			cropper_visible = true;
			}
	}


function set_cursor(elem,event)
	{
	if(!is_mouse_over)
		{
		is_mouse_over = true;
		if(isIE)
			{
			event = window.event;
			}
		direction = elem.id.split('_')[0];
		current_element = elem;
	
		document.body.onmousedown = handle_mouse;
		document.body.style.cursor = direction + "-resize";
		current_element.onmouseout = function () {document.body.style.cursor = "default";is_mouse_over = false;};
		}
	}


function handle_mouse(event)
	{
	if(isIE)
		{
		event = window.event;
		}
		
	switch (event.type)
		{
		case 'mousedown':
			//document.body.style.cursor = "n-resize";
			var x = event.clientX;
			var y = event.clientY;
			mouse_start_x = x;
			mouse_start_y = y;
			if(isIE)
				{
				document.attachEvent("onmousemove",handle_mouse);
				document.attachEvent("onmouseup",handle_mouse);
				}
				else
					{
					document.addEventListener("mousemove",handle_mouse,true);
					document.addEventListener("mouseup",handle_mouse,true);
					}
			break;
		case 'mousemove':
			var x = event.clientX;
			var y = event.clientY;
			var x_delta = x - mouse_start_x;
			var y_delta = y - mouse_start_y;
			switch(direction)
				{
				case 'nw':
					w_resize(x_delta);
					n_resize(y_delta);
					break;
				case 'n':
					n_resize(y_delta);
					break;
				case 'ne':
					e_resize(x_delta);
					n_resize(y_delta);
					break;
				case 'w':
					w_resize(x_delta);
					break;
				case 'e':
					e_resize(x_delta);
					break;
				case 'sw':
					w_resize(x_delta);
					s_resize(y_delta);
					break;
				case 's':
					s_resize(y_delta);
					break;
				case 'se':
					e_resize(x_delta);
					s_resize(y_delta);
					break;
				}
			//setting again the starting positions
			mouse_start_x = x;
			mouse_start_y = y;
			break;
		case 'mouseup':
			//document.body.style.cursor = "default";
			document.body.onmousedown = "";
			if(isIE)
				{
				document.detachEvent("onmousemove",handle_mouse);
				document.detachEvent("onmouseup",handle_mouse);
				}
				else
					{
					document.removeEventListener("mousemove",handle_mouse,true);
					document.removeEventListener("mouseup",handle_mouse,true);
					}
			break;
		}
	return false;
	}

function n_resize(delta)
	{
	if(
		parseInt(c_td_elem.style.height)-delta>min_center_height
		&&
		parseInt(n_td_elem.style.height)+delta>cropper_border
		)
		{
		nw_td_elem.style.height = (parseInt(nw_td_elem.style.height) + delta) + 'px';
		n_td_elem.style.height = (parseInt(n_td_elem.style.height) + delta) + 'px';
		ne_td_elem.style.height = (parseInt(ne_td_elem.style.height) + delta) + 'px';
		w_td_elem.style.height = (parseInt(w_td_elem.style.height) - delta) + 'px';
		c_td_elem.style.height = (parseInt(c_td_elem.style.height) - delta) + 'px';
		e_td_elem.style.height = (parseInt(e_td_elem.style.height) - delta) + 'px';
		return true;
		}
		else
			{
			return false;
			}
	}

function s_resize(delta)
	{
	if(
		parseInt(c_td_elem.style.height)+delta>min_center_height
		&&
		parseInt(s_td_elem.style.height)-delta>cropper_border
		)
		{
		w_td_elem.style.height = (parseInt(w_td_elem.style.height) + delta) + 'px';
		c_td_elem.style.height = (parseInt(c_td_elem.style.height) + delta) + 'px';
		e_td_elem.style.height = (parseInt(e_td_elem.style.height) + delta) + 'px';
		sw_td_elem.style.height = (parseInt(sw_td_elem.style.height) - delta) + 'px';
		s_td_elem.style.height = (parseInt(s_td_elem.style.height) - delta) + 'px';
		se_td_elem.style.height = (parseInt(se_td_elem.style.height) - delta) + 'px';
		return true;
		}
		else
			{
			return false;
			}
	}

function w_resize(delta)
	{
	if(
		parseInt(c_td_elem.style.width)-delta>min_center_width
		&&
		parseInt(w_td_elem.style.width)+delta>cropper_border
		)
		{
		nw_td_elem.style.width = (parseInt(nw_td_elem.style.width) + delta) + 'px';
		w_td_elem.style.width = (parseInt(w_td_elem.style.width) + delta) + 'px';
		sw_td_elem.style.width = (parseInt(sw_td_elem.style.width) + delta) + 'px';
		n_td_elem.style.width = (parseInt(n_td_elem.style.width) - delta) + 'px';
		c_td_elem.style.width = (parseInt(c_td_elem.style.width) - delta) + 'px';
		s_td_elem.style.width = (parseInt(s_td_elem.style.width) - delta) + 'px';
		return true;
		}
		else
			{
			return false;
			}
	}

function e_resize(delta)
	{
	if(
		parseInt(c_td_elem.style.width)+delta>min_center_width
		&&
		parseInt(e_td_elem.style.width)-delta>cropper_border
		)
		{
		n_td_elem.style.width = (parseInt(n_td_elem.style.width) + delta) + 'px';
		c_td_elem.style.width = (parseInt(c_td_elem.style.width) + delta) + 'px';
		s_td_elem.style.width = (parseInt(s_td_elem.style.width) + delta) + 'px';
		ne_td_elem.style.width = (parseInt(ne_td_elem.style.width) - delta) + 'px';
		e_td_elem.style.width = (parseInt(e_td_elem.style.width) - delta) + 'px';
		se_td_elem.style.width = (parseInt(se_td_elem.style.width) - delta) + 'px';
		return true;
		}
		else
			{
			return false;
			}
	}



function show_stat(elem,upper)
	{
	if(stat_timeout_id)
		{
		clearTimeout(stat_timeout_id);
		}
	var views_stats = $('views_stats');
	views_stats.style.visibility = 'visible';
	views_stats.style.display = 'block';
	
	if(upper)
		{
		var xcoord = getX(elem) - 2;
		var ycoord = getY(elem) - views_stats.offsetHeight;//offsetHeight is nonzero after the element is made visible
		}
		else
			{
			var xcoord = getX(elem) + elem.offsetWidth - 220;
			var ycoord = getY(elem) + 16;
			}
	views_stats.style.top = ycoord + 'px';
	views_stats.style.left = xcoord + 'px';
		
	}

function hide_stats_callback()
	{
	var views_stats = $('views_stats');
	views_stats.style.visibility = 'hidden';
	views_stats.style.display = 'none';
	}

function hide_stats()
	{
	if(stat_timeout_id)
		{
		clearTimeout(stat_timeout_id);
		}
	stat_timeout_id = setTimeout(hide_stats_callback,'500');
	}