// thumbnails of the images that are available
var available_images         = new Array();

var select_first_x           = 0;
var select_first_y           = 0;

var drag                     = false;

var CORNER_LEFT_TOP          = 1;
var CORNER_LEFT_BOTTOM       = 2;
var CORNER_RIGHT_TOP         = 3;
var CORNER_RIGHT_BOTTOM      = 4;

var SELECT_CLICK_OFFSET      = 2;

var RES_NEXT                 = 0;
var RES_PREV                 = 1;
var RES_ORIGINAL             = 2;

var GRID_DIM                 = 10;


var section_index            = document.location.search.substring(1);
if (section_index == "" || section_index == 'undefined') {
	section_index = 2;
} else {
	section_index = parseInt(section_index);
}

var buttons_titles           = new Array("left", "up", "right", "down", "-",       "+");
var buttons_names            = new Array("left", "up", "right", "down", "zoom_out", "zoom_in");
var i;
for (i = 0; i < buttons_titles.length; i++) {
	eval("var " + buttons_names[i] + "_enabled      = new Image();");
	eval(         buttons_names[i] + "_enabled.src  = '../img/zoom_button.img?text=\"" + buttons_titles[i] + "\"&width=30'");

	eval("var " + buttons_names[i] + "_disabled      = new Image();");
	eval(         buttons_names[i] + "_disabled.src  = '../img/zoom_button.img?text=\"" + buttons_titles[i] + "\"&width=30&enabled=0'");
}


var loading_source           = new Image();
	loading_source.src       = 'Images/loading.gif';

available_images[0]            = new Array();
available_images[0][0]         = new AvailableImage('people/1_1256x1256', 'people');
available_images[0][1]         = new AvailableImage('people/2_2758x2758', 'people');
available_images[0][2]         = new AvailableImage('people/3_1515x1513', 'people');

available_images[1]            = new Array();
available_images[1][0]         = new AvailableImage('urban/1_1900x1900', 'urban');
available_images[1][1]         = new AvailableImage('urban/2_2437x2437', 'urban');

available_images[2]            = new Array();
available_images[2][0]         = new AvailableImage('animals/1_1915x1915', 'animals');
available_images[2][1]         = new AvailableImage('animals/2_2559x2559', 'animals');
available_images[2][2]         = new AvailableImage('animals/3_2726x2726', 'animals');
available_images[2][3]         = new AvailableImage('animals/4_2748x2748', 'animals');
available_images[2][4]         = new AvailableImage('animals/5_3127x3127', 'animals');

available_images[3]            = new Array();
available_images[3][0]         = new AvailableImage('med/1_2097x2097', 'med');
available_images[3][1]         = new AvailableImage('med/2_1200x1200', 'med');

available_images[4]            = new Array();
available_images[4][0]         = new AvailableImage('sights/1_2229x2231', 'sights');
available_images[4][1]         = new AvailableImage('sights/2_2648x2648', 'sights');
available_images[4][2]         = new AvailableImage('sights/3_3600x3600', 'sights');
available_images[4][3]         = new AvailableImage('sights/4_2957x2957', 'sights');
available_images[4][4]         = new AvailableImage('sights/5_2957x2957', 'sights');
available_images[4][4]         = new AvailableImage('sights/6_1530x1532', 'sights');
available_images[4][4]         = new AvailableImage('sights/7_2760x2758', 'sights');
available_images[4][4]         = new AvailableImage('sights/8_3504x3508', 'sights');

available_images[5]            = new Array();
available_images[5][0]         = new AvailableImage('sports/1_1425x1425', 'sports');
available_images[5][1]         = new AvailableImage('sports/2_2754x2754', 'sports');
available_images[5][2]         = new AvailableImage('sports/3_2754x2754', 'sports');
available_images[5][3]         = new AvailableImage('sports/4_2626x2626', 'sports');
available_images[5][4]         = new AvailableImage('sports/5_1883x1883', 'sports');


var left                     = 0;
var top                      = 0;
var depth                    = 1;
var old_depth                = 1;

var HORIZONTAL_OFFSET        = 20;
var VERTICAL_OFFSET          = 20;

var MAX_DEPTH_VALUE          = 6;
var INITIAL_DEPTH_VALUE      = 1;
var INITIAL_LEFT_VALUE       = 0;
var INITIAL_TOP_VALUE        = 0;
var MAX_DIMENTION_VALUE      = 6;
var IMAGES_DIRECTORY         = '../zoom/Images/';

var old_button               = MAX_DEPTH_VALUE - 1;
var current_image_src        = "";

var SCREEN_IMAGE_NAME        = 'screen';
var HIDDEN_IMAGE_NAME        = 'hidden_image';

var IMAGE_LEFT               = 26;
var IMAGE_TOP                = 73;
var IMAGE_WIDTH              = 320;
var IMAGE_HEIGHT             = 320;

var MAX_RESOLUTION_TYPES     = 6;

var current_image_index      = 0;



var loading                  = true;


function GotoPage()
{
	var obj    = document.forms[0].section;
	var index  = obj.selectedIndex;
	var value  = obj.options[index].value;

	var loc    = "" + document.location;
	if (loc.indexOf("?") == -1) {
		document.location = loc + "?" + value;
	} else {
		loc = loc.substring(0, loc.indexOf("?")) + "?" + value;
		document.location = loc;
	}
}



function AvailableImage(source, alt_text)
{
	this.src       = source;
	this.alt       = alt_text;
}

function DrawAvailableImages()
{
	var i;
	document.write('<table cellspacing=0 cellpadding=2 border=0>');
	for (i = 0; i < available_images[section_index].length; i++) {
		var current_resolution_type = "_" + MAX_RESOLUTION_TYPES + ".jpg";
		var code = '<tr><td><a href="javascript:ResetImage();current_image_index=' + i + ';Do(\'reset\')"><img src=\'../img/thumbnail.img?img="..%2Fzoom%2FImages%2F' + available_images[section_index][i].src + current_resolution_type + '"&w=50&h=50' + '\' alt=\'' + available_images[section_index][i].alt + '\' width=50 height=50 border=0></a></td></tr>';
		document.write(code);
	}
	document.write('<tr><td>&nbsp;</td></tr>');
	var select_code = '<select name="section" onchange="javascript:GotoPage()">\
						<option value="">[Choose Section]\
						<option value="0">People\
						<option value="1">Urban\
						<option value="2" selected>Animals\
						<option value="3">Medicine\
						<option value="4">Sights\
						<option value="5">Sports\
						</select>';
	document.write('<tr><td>' + select_code + '</td></tr>');
	document.write('</table>');

}


function TakeCareAboutTheButton(button_name, opposite_button_name, dimention, min_dimention, max_dimention, offset)
{
	dimention = dimention + offset;
	if (dimention == min_dimention) {
		SetButtonEnabled(button_name, false);
	} else {
		if (dimention - offset == min_dimention)
			return dimention - offset;
		if (dimention == max_dimention + offset)
			SetButtonEnabled(opposite_button_name, true);
		else
			return dimention;
	}

	return dimention;
}


function Do(cmd)
{
	if (loading)
		return;

	if (depth == MAX_DEPTH_VALUE && old_depth == MAX_DEPTH_VALUE - 1) {
		SetButtonEnabled("zoom_in", false);
	} 

	if (old_depth == INITIAL_DEPTH_VALUE) {
		SetButtonEnabled("left", true);
		SetButtonEnabled("up", true);
		SetButtonEnabled("right", true);
		SetButtonEnabled("down", true);
	}

	if (cmd == 'left' && depth != INITIAL_DEPTH_VALUE) {
		left = TakeCareAboutTheButton('left', 'right', left, -MAX_DIMENTION_VALUE, MAX_DIMENTION_VALUE, -HORIZONTAL_OFFSET);
	} else if (cmd == 'right' && depth != INITIAL_DEPTH_VALUE) {
		left = TakeCareAboutTheButton('right', 'left', left, MAX_DIMENTION_VALUE, -MAX_DIMENTION_VALUE, HORIZONTAL_OFFSET);
	} else if (cmd == 'up' && depth != INITIAL_DEPTH_VALUE) {
		top = TakeCareAboutTheButton('up', 'down', top, -MAX_DIMENTION_VALUE, MAX_DIMENTION_VALUE, -VERTICAL_OFFSET);
	} else if (cmd == 'down' && depth != INITIAL_DEPTH_VALUE) {
		top = TakeCareAboutTheButton('down', 'up', top, MAX_DIMENTION_VALUE, -MAX_DIMENTION_VALUE, VERTICAL_OFFSET);
	} else if (cmd == '+') {
		if (depth >= MAX_DEPTH_VALUE) {
			depth = MAX_DEPTH_VALUE;
			return;
		}
		depth = TakeCareAboutTheButton('zoom_in', 'zoom_out', depth, MAX_DEPTH_VALUE, 1, 1);
		var res = GetResolution(null);
		left = res[0] / 2 - IMAGE_WIDTH / 2;
		top  = res[1] / 2 - IMAGE_HEIGHT / 2;
	} else if (cmd == '-') {
		if (depth <= 0) {
			depth = 1;
			return;
		}
		depth = TakeCareAboutTheButton('zoom_out', 'zoom_in', depth, 1, MAX_DEPTH_VALUE, -1);
		var res = GetResolution(null);
		left = res[0] / 2 - IMAGE_WIDTH / 2;
		top  = res[1] / 2 - IMAGE_HEIGHT / 2;
	} else if (cmd == 'reset') {
		depth    = INITIAL_DEPTH_VALUE;
		left = INITIAL_LEFT_VALUE;
		top = INITIAL_TOP_VALUE;
		ResetButtons(true);

		// init the "left" and "top" values
		current_image_src = available_images[section_index][current_image_index].src;
		var res = GetResolution(null);

		left = res[0] / 2 - IMAGE_WIDTH / 2;
		top  = res[1] / 2 - IMAGE_HEIGHT / 2;

		if (left < 0) left = 0;
		if (top  < 0) top  = 0;

		UpdateImage();

	}

	old_depth = depth;

	if (old_depth == INITIAL_DEPTH_VALUE) {
		SetButtonEnabled("left", false);
		SetButtonEnabled("up", false);
		SetButtonEnabled("right", false);
		SetButtonEnabled("down", false);
	}

	if (cmd != 'reset')
		UpdateImage();
}

function UpdateImage()
{
	loading = true;

	left = Math.floor(left);
	top  = Math.floor(top);
	depth    = Math.floor(depth);

	EnableProgressBtn(MAX_DEPTH_VALUE - depth);

	var img_src = available_images[section_index][current_image_index].src;
	current_image_src = img_src;

	var resolution_type = MAX_DEPTH_VALUE + 1 - depth;//MAX_RESOLUTION_TYPES - Math.floor(depth / MAX_RESOLUTION_TYPES);

	var zoom_source = '../img/zoom.img?image_path="' + img_src + "_" + resolution_type + '"&depth=' + depth + '&left=' + left + '&top=' + top;

	document.images[HIDDEN_IMAGE_NAME].src = zoom_source;
	document.images[SCREEN_IMAGE_NAME].src = loading_source.src;
}



function Loaded(i)
{
	if (i > 1) {
		document.images[SCREEN_IMAGE_NAME].src = document.images[HIDDEN_IMAGE_NAME].src;
		loading = false;
		return;
	} else {
		i++;
		window.setTimeout("Loaded(" + i + ")", 100);
	}
}


function ResetImage()
{
	depth = INITIAL_DEPTH_VALUE;
	left  = INITIAL_LEFT_VALUE;
	top   = INITIAL_TOP_VALUE;
}


function SetButtonEnabled(button_name, enabled)
{
	if (document.images[button_name])
		document.images[button_name].src = eval(button_name + (enabled ? "_enabled" : "_disabled") + ".src");
}

function ResetButtons(dont_update_image)
{
	var i;
	for (i=0; i < buttons_titles.length - 1; i++) {
		document.images[buttons_names[i]].src = eval(buttons_names[i] + "_disabled.src");
	}

	if (!dont_update_image)
		UpdateImage();
}

function MouseMoveHandler(e)
{
	var x = GetMouseX();
	var y = GetMouseY();

	if (drag) {
		DoSelect(x, y);
	}
}

function MouseDownHandler(e) 
{
	var x = GetMouseX();
	var y = GetMouseY();

	select_first_x = x;
	select_first_y = y;
	current_selected_width  = 0;
	current_selected_height = 0;
	HideSelectLayers();
	drag = true;
}

function MouseUpHandler(e) 
{
	var x = GetMouseX();
	var y = GetMouseY();

	if (current_selected_width <= 2 || current_selected_height <= 2) {
		CalculateZoom(x, y);

		depth = TakeCareAboutTheButton('zoom_in', 'zoom_out', depth, MAX_DEPTH_VALUE, 1, 1);
		old_depth = depth;

		if (old_depth == INITIAL_DEPTH_VALUE) {
			SetButtonEnabled("left", false);
			SetButtonEnabled("up", false);
			SetButtonEnabled("right", false);
			SetButtonEnabled("down", false);
		}
	} else {
		drag = false;

		var res = GetResolution(null);

		var offset = Math.floor((IMAGE_WIDTH / current_selected_width + IMAGE_HEIGHT / current_selected_height) / 2) + 1;
		depth += offset;
		if (depth > MAX_DEPTH_VALUE) {
			depth = MAX_DEPTH_VALUE;
		}

		x  -= current_selected_width;
		y  -= current_selected_height;

		var res_next = GetResolution(null);

		CalculateZoom(x, y, res, res_next);

		HideSelectLayers();
	}

	UpdateImage();
	drag = false;
}

function CalculateZoom(x, y, r, r_n)
{

	if (!InImage(x, y)) {
		return;
	}

	x -= IMAGE_LEFT;
	y -= IMAGE_TOP;

	if (x < 0) x = 0;
	if (y < 0) y = 0;

	var res       = r   ? r   : GetResolution(null);
	var res_next  = r_n ? r_n : GetResolution(RES_NEXT);

	var real_left = (res[0] / IMAGE_WIDTH)  * x;
	var real_top  = (res[1] / IMAGE_HEIGHT) * y;
	var fut_left  = (res_next[0] / res[0]) * real_left;
	var fut_top   = (res_next[1] / res[1]) * real_top;

	//left = (res_next[0] / res[0]) * left;
	//top  = (res_next[0] / res[0]) * top;

	// make these left and top pos to be in the
	// center of the image
	left += fut_left - (r_n ? 0 : res_next[0] / 2);
	top  += fut_top  - (r_n ? 0 : res_next[1] / 2);
	//left = left - res_next[0] / 2;
	//top  = top  - res_next[1] / 2;

	// check for out of boundaries
	if (left > res_next[0]) {left = res_next[0] - IMAGE_WIDTH;}
	if (top  > res_next[1]) {top  = res_next[1] - IMAGE_HEIGHT;}

	if (left < 0) {left = 0;}
	if (top  < 0) {top  = 0;}

	// some debug
	/*alert("depth:     " + depth + "\r\n" +
	      "left:      " + x + "\r\n" +
	      "top:       " + y  + "\r\n" +
		  "res:       " + res[0] + "x" + res[1] + "\r\n" + 
		  "fres:      " + res_next[0] + "x" + res_next[1] + "\r\n" +
		  "real left: " + real_left + "\r\n" + 
		  "real top:  " + real_top + "\r\n" + 
		  "fleft:     " + fut_left + "\r\n" + 
		  "ftop:      " + fut_top + "\r\n\r\n" +
		  "param left:" + left + "\r\n" + 
		  "param top: " + top);
		*/
}

function DrawSelectRectangle(x, y, width, height)
{
	var left    = document.all["layer_left"].style;
	var right   = document.all["layer_right"].style;
	var top     = document.all["layer_top"].style;
	var bottom  = document.all["layer_bottom"].style;

	left.left = x;
	left.top  = y;
	left.width = 1;
	left.height = height;

	top.left = x;
	top.top  = y;
	top.width = width;
	top.height = 1;

	right.left = x + width;
	right.top  = y;
	right.width = 1;
	right.height = height;

	bottom.left = x;
	bottom.top = y + height;
	bottom.width = width + 1;
	bottom.height = 1;

	left.visibility = "visible";
	top.visibility  = "visible";
	right.visibility = "visible";
	bottom.visibility = "visible";
}


function GetMouseX()
{
	var x = event.x + document.body.scrollLeft;

	// snap to grid
	var cell = Math.round(x / GRID_DIM);
	return (cell * GRID_DIM);
}

function GetMouseY()
{
	var y = event.y + document.body.scrollTop;
	var cell = Math.round( y / GRID_DIM );
	return (cell * GRID_DIM);
}

function HideSelectLayers()
{
	var all_names = new Array("layer_left", "layer_right", "layer_top", "layer_bottom");
	var i;
	for (i = 0; i < all_names.length; i++) {
		if (document.all[all_names[i]]) {
			document.all[all_names[i]].style.visibility = "hidden";
		}
	}
	selection = false;
}


function DoSelect(x, y)
{
	var first_x = select_first_x;
	var first_y = select_first_y;

	var temp;
	
	var width  = Math.abs(x - select_first_x);
	var height = Math.abs(y - select_first_y);

	if (x < first_x) {
		temp = x;
		x = first_x;
		first_x = temp;
	}
	if (y < first_y) {
		temp = y;
		y = first_y;
		first_y = temp;
	}

	current_selected_x = first_x;
	current_selected_y = first_y;
	current_selected_width = width;
	current_selected_height = height;

	DrawSelectRectangle(first_x, first_y, width, height);
}



function InImage(x, y)
{
	x = x - IMAGE_LEFT;
	y = y - IMAGE_TOP;

	if (x < 0 || y < 0 || x > IMAGE_WIDTH || y > IMAGE_HEIGHT){
		return false;
	}

	return true;
}

function Selection(how)
{
	to_select = how;
}

function WhichCorner(x, y)
{
	// we assume x and y are relative to image's left/top corner
	if (x <= IMAGE_WIDTH / 2 && y <= IMAGE_HEIGHT / 2) {
		return CORNER_LEFT_TOP
	}
	// left bottom corner
	if (x <= IMAGE_WIDTH / 2 && y > IMAGE_HEIGHT / 2) {
		return CORNER_LEFT_BOTTOM;
	}
	// right top corner
	if (x > IMAGE_WIDTH / 2 && y <= IMAGE_HEIGHT / 2) {
		return CORNER_RIGHT_TOP;
	}
	if (x > IMAGE_WIDTH / 2 && y > IMAGE_HEIGHT / 2) {
		return CORNER_RIGHT_BOTTOM;
	}

	return CORNER_LEFT_TOP;
}


function EnableProgressBtn(i)
{
	var src = '../img/zoom_button.img?text=" "&width=20';
	document.images['progress' + old_button].src = src;
	document.images['progress' + i].src          = src + GetEnabledSuffix();

	old_button = i;
	depth      = MAX_DEPTH_VALUE - i;
}


function DrawZoomProgressImages()
{
	var i;
	for (i = 0; i < MAX_DEPTH_VALUE; i++) {
		var enabled_str = (i == MAX_DEPTH_VALUE - 1) ? GetEnabledSuffix() : '';
		var src         = '../img/zoom_button.img?text=" "&width=20';
		var code = '<a href="javascript:EnableProgressBtn(' + i + ');DoSpecialZoom(' + i + ');UpdateImage();"><img src=\'' + src + enabled_str + '\' name="progress' + (i) + '" border=0></a>';
		document.write(code);
	}
}

function GetEnabledSuffix() 
{
	var r = 0;
	var g = 150;
	var b = 250;
	return '&enabled_bg_r=' + r + '&enabled_bg_g=' + g + '&enabled_bg_b=' + b;
}


function GetResolution(which)
{
	if (current_image_src == "") current_image_src = available_images[0][0].src;
	var src = current_image_src.substring(current_image_src.lastIndexOf("/"));
	var array = src.split("x");
	var d     = depth;
	if (which != null) {
		if (which == RES_NEXT) {
			d++;
		} else if (which == RES_PREV) {
			d--;
		}
	}
	if (d <= 0) d = depth;
	if (d > MAX_DEPTH_VALUE)   d = depth;
	if (which == RES_ORIGINAL) d = MAX_DEPTH_VALUE;

	return new Array( (array[0].split("_"))[1] / (MAX_DEPTH_VALUE - d + 1), (array[1].split("_"))[0] / (MAX_DEPTH_VALUE - d + 1) );
}


function DoSpecialZoom(i)
{
	var res = GetResolution(null);
	left = Math.floor(res[0] / 2 - IMAGE_WIDTH / 2);
	top  = Math.floor(res[1] / 2 - IMAGE_HEIGHT / 2);
}