okeanos = {};
var $$ = {};




$(window).load(function(){			// wait to load images

	// rebuild page
	okeanos.setup_home_page();

	// add img 2
	$('div#c2').prepend('<img id="bg2" src="/img/2.jpg">');

	// when the page 2 background image is loaded
	$('img#bg2').load(function() {

		// rebuild page
		okeanos.setup_home_page();

		// add img 3
		$('div#c3').prepend('<img id="bg3" src="/img/3.jpg">');

		// when img 3 is done
		$('img#bg3').load(function() {
			// rebuild page
			okeanos.setup_home_page();
		});
	});
});

$(document).ready(function(){		// wait for dom to be ready

	okeanos.init = function() {
		$$.winX = (document.all)?window.screenLeft:window.screenX;
		$$.winY = (document.all)?window.screenTop:window.screenY;
	};

	
	// init
	okeanos.init();

	okeanos.$projects_desc = $('div#home_current_projects_desc');
	okeanos.$projects_list = $('div#home_current_projects_list');
	okeanos.$home_all_current_projects = $('div#home_current_projects_desc > div');
	okeanos.home_current_project = 0;


	/* ------------------------------------------------------------ */
	
	
	var t = $('table');
	var input_filter = $('input#filter');
	input_filter.keyup(function() {
		$.uiTableFilter(t, input_filter.val());
	});
	
	
	var currentScreen = 1;
	var numScreens = 3;
	
	function animate_to_screen(dest) {
		if (dest > numScreens) { dest = numScreens; }
		if (dest < 1) { dest = 1; }
		if (dest == currentScreen) { return true; }
	
		currentScreen = dest;
		var newMarginLeft = ((currentScreen-1) * -100) + '%';
		$('div.c').animate({
			marginLeft: newMarginLeft
		},500);

		return true;
	}
	
	
	
	$('a#c1_nav_2').click(function() {
		animate_to_screen(2);	
	});
	$('a#c1_nav_3').click(function() {
		animate_to_screen(3);	
	});
	$('a#c2_nav_1').click(function() {
		animate_to_screen(1);	
	});
	$('a#c2_nav_3').click(function() {
		animate_to_screen(3);	
	});
	$('a#c3_nav_1').click(function() {
		animate_to_screen(1);	
	});
	$('a#c3_nav_2').click(function() {
		animate_to_screen(2);	
	});
	$('div.logo').click(function() {
		animate_to_screen(1);
	});



	$('div#blog_article_3').hide();



	//------------------------------------------------------------------------------------------

	window.toggle_blog_article = function (article_num) {
		$('div#blog_article_'+article_num).toggle();
	};


	okeanos.Resizing = false;
	$(window).resize(function() {
		if ( ! okeanos.Resizing) {

			// set concurrency flag to prevent multiple events firing at once
			okeanos.Resizing = true;

			// reset concurrency flag
			setTimeout('okeanos.setup_home_page();okeanos.Resizing = false;',100);
		}
	});




	okeanos.setup_home_page = function() {
		okeanos.setup_home_page_background();
		okeanos.setup_home_page_elements();
		okeanos.Resizing = false;

	};

	okeanos.setup_home_page_background = function() {

		var $pane=$('div#pane');

		// max out pane
		$pane.width('100%');
		$pane.height($(window).height());

		// get pane dimensions
		var window_x = $pane.width();
		var window_y = $pane.height();

		var window_ratio = window_x / window_y;
		var imageshown_x;
		var imageshown_y;
		var offset_x;
		var offset_y;

		var image_x = [];
		var image_y = [];
		var img_ratio = [];
		image_x[0] = 1920;
		image_y[0] = 1294;
		image_x[1] = 2189;
		image_y[1] = 1200;
		image_x[2] = 1920;
		image_y[2] = 1276;
		img_ratio[0] = image_x[0] / image_y[0];
		img_ratio[1] = image_x[1] / image_y[1];
		img_ratio[2] = image_x[2] / image_y[2];


		for (var i = 0; i < 3; i++) {
			if (window_ratio <= img_ratio[i]) { // use height, scale width
				imageshown_x = window_y * img_ratio[i];
				imageshown_y = window_y;
				offset_x = (imageshown_x-window_x)/2;
				offset_y = 0;
				$('img#bg'+(i+1)).css({						// vertical center
					left:'-'+offset_x+'px',
					top:0
				});
			}
			else { // use width, scale height
				imageshown_x = window_x;
				imageshown_y = window_x / img_ratio[i];
				offset_x = 0;
				offset_y = (imageshown_y-window_y)/2;
				$('img#bg'+(i+1)).css({						// vertical center
					left:0,
					top:'-'+offset_y+'px'
				});
			}
			

			$('img#bg'+(i+1)).attr({
				'width': imageshown_x,
				'height': imageshown_y
			});

			switch (i) {
				case 0:
					//------------------------------
					var left_percentage_pos = 0.74;
					var top_percentage_pos = 0.085;
					var font_size_factor = 0.18;
					$('div#c1a').css({
						'left': ((left_percentage_pos*imageshown_x)-offset_x)+'px',
						'top': ((top_percentage_pos*imageshown_x)-offset_y)+'px',
						'font-size': (imageshown_x*font_size_factor)+'%'
					});
					//------------------------------
					left_percentage_pos = 0.74;
					top_percentage_pos = 0.13;
					font_size_factor = 0.095;
					$('div#c1b').css({
						'left': ((left_percentage_pos*imageshown_x)-offset_x)+'px',
						'top': ((top_percentage_pos*imageshown_x)-offset_y)+'px',
						'font-size': (imageshown_x*font_size_factor)+'%'
					});
					//------------------------------
					break;
			}
		}
	};

	okeanos.setup_home_page_elements = function () {
		var window_width = $(window).width();
		var window_height = $(window).height();

		var project_desc_height;
		var project_desc_right=window_width - parseInt(okeanos.$projects_list.position().left) + 30;
		var project_desc_width=window_width - project_desc_right - 50;
		if (project_desc_width > 500) {
			project_desc_width = 500;
		}

		// reset text box to determine natural height
		okeanos.$projects_desc.css({
			height:'auto'
		});
		project_desc_height = okeanos.$projects_desc.outerHeight();


		// if text box is too big, resize height
		if (project_desc_height > window_height * 0.5) {
			project_desc_height = window_height * 0.5;
		}

		okeanos.$projects_desc.css({
			'width':project_desc_width,
			'height':project_desc_height,
			'right':project_desc_right
		});
	};

	okeanos.home_hide_current_project = function() {
			okeanos.$projects_desc.hide();
			$('div#home_project_'+okeanos.home_current_project).hide();
			okeanos.home_current_project = 0;
	};

	okeanos.home_show_current_project = function(project_num) {
		if (okeanos.home_current_project == project_num) {
////			okeanos.$projects_desc.fadeOut();
//			okeanos.$projects_desc.hide();
//			$('div#home_project_'+okeanos.home_current_project).hide();
//			okeanos.home_current_project = 0;
		} else {
			if (okeanos.home_current_project == 0) {
				okeanos.$projects_desc.show();
//				okeanos.$projects_desc.fadeIn();
			}
			$('div#home_project_'+okeanos.home_current_project).hide();
			$('div#home_project_'+project_num).fadeIn();
			okeanos.setup_home_page_elements();
			okeanos.home_current_project = project_num;
		}
	};

	//------------------------------
//	animate_to_screen(2);
	DD_roundies.addRule('div#home_current_projects_desc, div#blog_article_3', '10px', true);
	okeanos.setup_home_page();

}); // end of load/ready








//========================================================================================================================
//========================================================================================================================
//========================================================================================================================







function preparePage() {
	define_all_hovers();
	preload_all_images();
}

// ------------------------------------------------------------------------------------------



function opacity(id, opacStart, opacEnd, millisec) {
	// speed for each frame
	var steps = 25;
	var speed = Math.round(millisec / steps);
	var timer = 0;
	var stepsize;

	// determine the direction for the blending, if start and end are the same
	// nothing happens
	if (opacStart > opacEnd) {
		stepsize = (opacStart - opacEnd) / steps;
		for (i = opacStart; i >= opacEnd; i = i - stepsize) {
			setTimeout("changeOpac(" + i + ",'" + id + "')", (timer * speed));
			timer++;
		}
		setTimeout("hideElement('" + id + "')", (timer * speed));
	} else if (opacStart < opacEnd) {
		stepsize = (opacEnd - opacStart) / steps;
		for (i = opacStart; i <= opacEnd; i = i + stepsize) {
			setTimeout("changeOpac(" + i + ",'" + id + "')", (timer * speed));
			timer++;
		}
	}
}

// hide the element
function hideElement(id) {
	var object = document.getElementById(id).style;
	object.display = "none";
}

// change the opacity for different browsers
function changeOpac(opacity, id) {
	var object = document.getElementById(id).style;
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}





//========================================================================================================================
//========================================================================================================================

/*
* preloads the corresponding hover-images that end in _hv for all images that
* end in _nm
*/
function preload_all_images() {
	var preloaded = new Array(), img, imgList, mtchd;
	var regg = /(.*)(_nm\.)([^\.]{3,4})$/;
	// var prel = new Array(), img, imgList, imgsrc, mtchd;
	imgList = document.body.getElementsByTagName('img');
	for ( var i = 0; img = imgList[i]; i++) {
		if (img.src.match(regg)) {
			mtchd = img.src.match(regg);
			img.hoverSRC = mtchd[1] + '_hv.' + mtchd[3];
			if (img.hoverSRC) {
				preload_image(img.hoverSRC);
			}
		}
	}

	function preload_image(imgSrc) {
		preloaded[preloaded.length] = new Image();
		preloaded[preloaded.length - 1].src = imgSrc;
	}
}

//========================================================================================================================
//========================================================================================================================

/**
* <pre>
* 
* 
* DEFINITION:
* ------------------------------
* scan through all images and setup hover effect on those images that end in _nm
* 
* USAGE:
* ------------------------------
*  1. all items should be named:
* 		(menu)_(item)_nm.jpg
* 			and
* 		(menu)_(item)_hv.jpg
* 2. files should have the same path
* 
* </pre>
*/
function define_all_hovers() {
	var regex = /(.*)(_nm\.)([^\.]{3,4})$/;
	var preloaded_images = new Array(), img, imgList, parts;
	imgList = document.body.getElementsByTagName('img');

	for ( var i = 0; img = imgList[i]; i++) {
		if (!img.hoverIsSetup && img.src.match(regex)) {
			parts = img.src.match(regex);

			// define sources
			img.normalSRC = img.src;
			img.hoverSRC = parts[1] + '_hv.' + parts[3];
			img.hoverIsSetup = true;

			// set initial state of this button
			button_off(img);

			// preload this button's hover image
			preload_image(img.hoverSRC);
		}
	}

	// preload an image
	function preload_image(imgSrc) {
		preloaded_images[preloaded_images.length] = new Image();
		preloaded_images[preloaded_images.length - 1].src = imgSrc;
	}
}

function menu_reset(menu) {
	var btn, img;

	for ( var i = 0; btn = document.menus[menu][i]; i++) {
		img = document.getElementById(menu + '_' + btn);
		button_off(img);
	}
}

function button_off(img) {
	img.src = img.normalSRC;
	img.onmouseout = menu_item_normal;
	img.onmouseover = menu_item_hover;
}

function button_on(img) {
	img.src = img.hoverSRC;
	img.onmouseout = menu_item_hover;
	img.onmouseover = menu_item_hover;
}

function menu_item_normal() {
	this.src = this.normalSRC;
}
function menu_item_hover() {
	this.src = this.hoverSRC;
}

function menu_click(menu, btn) {
	menu_reset(menu);
	button_on(document.getElementById(menu + '_' + btn));

	var func = menu + '_' + btn + '_click';
	if (typeof (this[func]) == 'function') {
		this[func]();
	}

	return false;
}

//========================================================================================================================
//========================================================================================================================