var MenuContents = {
	Pointer:{Top:140, Delta:37},
	BPointer:{Left:209, Delta:28},
	ImageDelta:756, 
	MainCount:11, 
	Contents:[
		{Main:"1-m-homepage",  Open: "1-front page", SubParts: [], MoveTo: [],
			Intro:{Color:"white", Top:194, Height:64}},
		{Main:"11-m-thesis", Open: "11-thesis", Credits: "rendered-by",
			SubParts: ["11-m-thesis", "11-m-thesis", "11-m-thesis", "11-m-thesis", "11-m-thesis", "11-m-thesis", "11-m-thesis", "11-m-thesis", "11-m-thesis", "11-m-thesis", "11-m-thesis", "11-m-thesis", "11-m-thesis"],
			MoveTo: [0, 756, 1512, 2268, 3024, 3780, 4536, 5292, 6048, 6804, 7560, 8316, 9072],
			Intro: { Color: "#FFF", Top: 194, Height: 64}},
		{Main: "2-m-wallhouse", Open: "2-wallhouse",	 
			SubParts: ["2-m01-wallhouse", "2-m02-wallhouse"], MoveTo: [0, 788],
			Intro:{Color:"#636567", Top:194, Height:64}},
		{Main:"3-m-culschool", Open: "3-culinary school", 
			SubParts: ["3-m01-culschool", "3-m02-culschool", "3-m03-culschool", "3-m04-culschool"], MoveTo: [0, 757, 1504, 2257],
			Intro:{Color:"#f7f267", Top:194, Height:64}},
		{Main:"8-m-tower", Open: "8-tower", 
			SubParts: ["8-m01-tower", "8-m02-tower"], MoveTo: [0, 747],
			Intro:{Color:"#ceced0", Top:194, Height:63}},
		{Main:"4-m-bookstore", Open: "4-bookstore", 
			SubParts: ["4-m01-bookstore", "4-m02-bookstore", "4-m03-bookstore"], MoveTo: [0, 791, 1598],
			Intro:{Color:"#beccdd", Top:194, Height:64}},
		{Main:"6-m-berlin", Open: "6-berlin", 
			SubParts: ["6-m01-berlin", "6-m02-berlin", "6-m03-berlin", "6-m04-berlin"], MoveTo: [0, 761, 1509, 2257],
			Intro:{Color:"#ef5c62", Top:194, Height:64}},
		{Main:"5-m-pavilion",  Open: "5-pavilion", 
			SubParts: ["5-m01-pavilion", "5-m02-pavilion"], MoveTo: [0, 754],
			Intro:{Color:"#709496", Top:194, Height:64}},
		{Main:"7-m-dis", Open: "7-dis", 
			SubParts: ["7-m01-dis", "7-m02-dis"], MoveTo: [0, 754],
			Intro:{Color:"#5388b9", Top:194, Height:63}},
		{Main:"9-m-resume", Open: "okalosha-resume", HidePointer: true, Download: true,
			SubParts: [], MoveTo: [],
			Intro:{Color:"white", Top:230, Height:100}},
		{Main:"10-m-contacts", Open: "10-contact", HidePointer: true, ShowEmail: true,
			SubParts: [], MoveTo: [],
			Intro:{Color:"white", Top:194, Height:64}}
	]
};

function InitMenu()
{
	for(var i=0; i<MenuContents.MainCount; i++){
		RestoreMainMenu(i, -1, true);	
	}
	
	// Make the first menu item active
	g_CurrentContentsIndexMain = 0;
	MoveMenuPointer(g_CurrentContentsIndexMain);
	MoveBottomMenuPointer(g_CurrentContentsIndexSub);
	document.getElementById("slot1").innerHTML = GetMenuImageTag(g_CurrentContentsIndexMain, -1, false);
	document.getElementById("bottom_menu_slot").innerHTML = GetNumberImageTag(g_CurrentContentsIndexMain, -1, false);
	Intro(0);
	
	// Show content, which is initially hidden
	document.getElementById("main_frame").style.visibility = "visible";
	document.getElementById("menu").style.visibility = "visible";
	document.getElementById("top_menu").style.visibility = "visible";
	document.getElementById("bg_img").style.visibility = "visible";
	document.getElementById("copyright").style.visibility = "visible";
	document.getElementById("container").style.width = "946px";
	document.getElementById("loading_div").style.visibility = "hidden";
}


function RestoreMainMenu(contents_ind, sub_ind, is_clickable)
{
	var slot = document.getElementById("slot"+(contents_ind+1).toString());
	slot.innerHTML = GetMenuImageTag(contents_ind, sub_ind, is_clickable);
}

function GetMenuImageTag(contents_ind, sub_ind, is_clickable)
{
	// contents_ind must be 0-based and must not exceed MainCount
	// sub_ind must be 0-based and must not exceed corresponding SubParts.length; special value -1 means it should be ignored

    //~~~ XXX Olya asked for the menu not to be split in parts.
    if (sub_ind > 0) return "";
    sub_ind = -1;
    //~~~~~~~~~~~

	var src_base = (sub_ind==-1) ? 
		MenuContents.Contents[contents_ind].Main :
		MenuContents.Contents[contents_ind].SubParts[sub_ind];
	
	var src="images/menu/" + src_base + (is_clickable ? "" : "-a" ) + ".png";
	var handlers = (is_clickable) ? 
		"onmouseover=\"Hover(this,'"+src_base+"');\" "+
		"onmouseout=\"UnHover(this,'"+src_base+"');\" "+
		"onclick=\"MenuClick("+contents_ind+","+sub_ind+")\" "+
		"class=\"hand\"":
		"";
	var result = "<img alt=\"\" src=\""+src+"\" "+handlers+" />";
	return result;
}

function GetNumberImageTag(contents_ind, sub_ind, is_clickable)
{
	// contents_ind must be 0-based and must not exceed MainCount
	// sub_ind must be 0-based and must not exceed corresponding SubParts.length; -1 means that "1-a.png" img should be returned

	var main_index = MenuContents.Contents[contents_ind].Main.substr(0, 2).replace("-", ""); // project number prefix, so that projects can be reordered

	var src_base = (sub_ind == -1) ?
		"1" :
		((is_clickable) ? "" : main_index.toString() + "-") + (sub_ind + 1).toString();
	
	var src="images/numbers/" + src_base + (is_clickable ? "" : "-a" ) + ".png";
	var handlers = (is_clickable) ? 
		"onmouseover=\"HoverN(this,'"+src_base+"');\" "+
		"onmouseout=\"UnHoverN(this,'"+src_base+"');\" "+
		"onclick=\"MenuClick("+contents_ind+","+sub_ind+")\" "+
		"class=\"hand\"":
		"";
	var result = "<img alt=\"\" src=\""+src+"\" "+handlers+" />";
	return result;
}

function Hover(img, src_base)
{
	img.src = "images/menu/"+src_base+"-h.png";
}

function UnHover(img, src_base)
{
	img.src = "images/menu/"+src_base+".png";
}

function HoverN(img, src_base)
{
	img.src = "images/numbers/"+src_base+"-h.png";
}

function UnHoverN(img, src_base)
{
	img.src = "images/numbers/"+src_base+".png";
}

var g_CurrentContentsIndexMain = -1;
var g_CurrentContentsIndexSub = -1;
function MenuClick(contents_ind, sub_ind)
{
	// contents_ind - 0-based
	// Menu item was clicked:
	// for single-paged items switch to dn-state image
	// for multi-pages items switch to multiple images, first of which is in dn-state
	
	if(contents_ind	>= MenuContents.MainCount)
		return;
		
	// Restore previous item
	if(0 <= g_CurrentContentsIndexMain && g_CurrentContentsIndexMain < MenuContents.MainCount)
		RestoreMainMenu(g_CurrentContentsIndexMain, -1, true);
	
	// Stop pointer movement
	StopMoveMenuPointer();
	StopBottomMoveMenuPointer();
	
	// Get new item
	g_CurrentContentsIndexMain = contents_ind;
	var item = MenuContents.Contents[contents_ind];
	
	document.getElementById("email").style.visibility = (item.ShowEmail) ? "visible" : "hidden";

	if(item.SubParts.length==0){
		// single-paged item
		
		if(item.Download){
			document.location = "pdf/"+item.Open+".pdf";
		}else{
			document.getElementById("slot"+(contents_ind+1).toString()).innerHTML = GetMenuImageTag(contents_ind, -1, false);
			document.getElementById("bottom_menu_pointer").style.visibility = "hidden";
			document.getElementById("bottom_menu").style.visibility = "hidden";
			
			Intro(contents_ind);
				
			MoveTo(0);
		}
		g_CurrentContentsIndexSub = -1;
		
	}else{
		// multi-paged item
		
		document.getElementById("bottom_menu_pointer").style.visibility = "visible";
		document.getElementById("bottom_menu").style.visibility = "visible";
			
		SetMultiPagedItem(sub_ind);
		
		if(sub_ind==0 || sub_ind==-1){
			if(sub_ind == -1){
				Intro(contents_ind);
				MoveTo(0);
			}else{
				SlideTo(0);
			}
		}else{
			var new_px = sub_ind*MenuContents.ImageDelta;
			if(item.MoveTo.length == item.SubParts.length){
				new_px = item.MoveTo[(sub_ind==-1) ? 0 : sub_ind];
			}
			SlideTo(-new_px); // defined in move.js
		}
	}
	
	// Move pointers to new possition
	if(item.HidePointer)
		MoveMenuPointer(-1);
	else	
		MoveMenuPointer(contents_ind);
	MoveBottomMenuPointer(sub_ind);
}

function SetMultiPagedItem(sub_ind)
{
	var contents_ind = g_CurrentContentsIndexMain;
	
	g_CurrentContentsIndexSub = (sub_ind==-1) ? 0 : sub_ind;
	
	var item = MenuContents.Contents[contents_ind];
	var slot = document.getElementById("slot"+(contents_ind+1).toString());
	var btm_menu = document.getElementById("bottom_menu_slot");

	var is_clickable;
	slot.innerHTML = "";
	btm_menu.innerHTML = "";
	for(var j=0; j<item.SubParts.length; j++){
		is_clickable = (sub_ind==-1) ? (j!=0) : (j!=sub_ind);
		slot.innerHTML += GetMenuImageTag(contents_ind, j, false); // is_clickable ~~~ XXX Olya asked for the menu not to be split in parts.
		btm_menu.innerHTML += GetNumberImageTag(contents_ind, j, is_clickable);
		if(j<item.SubParts.length-1){
			slot.innerHTML += "<img alt=\"\" src=\"images/empty.gif\" width=\""+
				((item.SubParts.length == 2) ? "20" : "10")+"px\" height=\"13px\" />";
			btm_menu.innerHTML += "<img alt=\"\" src=\"images/empty.gif\" width=\"20px\" height=\"11px\" />";
		}
	}
	if (typeof (item.Credits) != "undefined") {
		btm_menu.innerHTML += "<img alt=\"\" style=\"margin-left:53px;\" src=\"images/" + item.Credits + ".png\" />";
	}
}

function CheckMiltiPagedItem(current_px)
{
	// if, e.g. 1st menu sub-item is selected,
	// but 2nd page of the image is displayed - adjust menu selection accordingly
	current_px = -current_px;
	
	var contents_ind = g_CurrentContentsIndexMain;
	
	// current menu selection index
	var sub_ind = g_CurrentContentsIndexSub;
	
	if(sub_ind == -1 || contents_ind == -1) return;
	
	var item = MenuContents.Contents[contents_ind];
	
	var real_image_ind = -1; // get this based on the current image position
	var page_start_px1 = 0;
	var page_start_px2;
	for(var j=1; j<item.SubParts.length; j++){
		if(item.MoveTo.length == item.SubParts.length)
			page_start_px2 = item.MoveTo[j];
		else
			page_start_px2 = j*MenuContents.ImageDelta;
		if(page_start_px1 <= current_px && current_px < page_start_px2){
			// found
			real_image_ind = j-1;
			break;
		}
		page_start_px1 = page_start_px2;
	}
	
	if(real_image_ind == -1){
		real_image_ind = item.SubParts.length-1;
	}
	
	if(real_image_ind != sub_ind){
		SetMultiPagedItem(real_image_ind);
		if(g_IsMouseOver)
			MoveBottomMenuPointer(real_image_ind);
	}
}

function GotoNextPage()
{
	g_CurrentContentsIndexSub = Math.min(MenuContents.Contents[g_CurrentContentsIndexMain].SubParts.length - 1, g_CurrentContentsIndexSub + 1);
	MenuClick(g_CurrentContentsIndexMain, g_CurrentContentsIndexSub);
}

var g_IntroTimer = null;
var g_IntroSpeed = 30;
var g_IntroTimeout = 20;
function Intro(contents_ind)
{
	var item = MenuContents.Contents[contents_ind];
	var main_img = document.getElementById("main_img");
	//main_img.style.display = "none";
	main_img.src = "images/" + item.Open + ".jpg";
	// SetOpacity("main_img", 0);
	main_img.style.visibility = "hidden";
	
	var intro = document.getElementById("intro_table");
	intro.style.backgroundColor = item.Intro.Color;	
	intro.style.top = item.Intro.Top + "px";	
	intro.style.height = item.Intro.Height + "px";
	
	// preload
	if(g_IsPreloaded){// defined in preload.js
		PlayIntro();
	}else{
		var img_pre = new Image();
		img_pre.onload =
			img_pre.onLoad = PlayIntro;
		img_pre.src = "images/" + item.Open + ".jpg";
	}
}

function PlayIntro()
{
	var intro = document.getElementById("intro_table");
	var w = parseInt(intro.style.width, 10);
	var target_w = MenuContents.ImageDelta+4;
	
	var new_w = Math.min(w+g_IntroSpeed, target_w);	// expand
	
	// Set new width
	intro.style.width = new_w.toString() + "px";
	
	// Keep moving
	if(new_w != target_w)
		g_IntroTimer = setTimeout("PlayIntro()", g_IntroTimeout);
	else
		StopIntro();	
}

function StopIntro()
{
	clearTimeout(g_IntroTimer);
	g_IntroTimer = null;
	//document.getElementById("main_img").style.display = "inline";
	//ChangeOpacity("main_img", 0, 100, 100);
	document.getElementById("main_img").style.visibility = "visible";
	
	document.getElementById("intro_table").style.width = "4px";	
}

var g_MenuPointerTimer = null;
var g_MenuPointerSpeed = 10;
var g_PointerTimeout = 20;
function MoveMenuPointer(contents_ind)
{
	// contents_ind is 0-based
	// if contents_ind=-1 => move pointer to -10px i.e. out of visible page
	var pointer = document.getElementById("menu_pointer");
	var y = parseInt(pointer.style.top, 10);
	var target_y = (contents_ind==-1) ? -10 :
		MenuContents.Pointer.Top + MenuContents.Pointer.Delta*contents_ind;
	
	var new_y = (y > target_y)?
		Math.max(y-g_MenuPointerSpeed, target_y) :	// need to move up
		Math.min(y+g_MenuPointerSpeed, target_y);	// need to move down
	
	// Set new position
	pointer.style.top = new_y.toString() + "px";
	
	// Keep moving
	if(new_y != target_y)
		g_MenuPointerTimer = setTimeout("MoveMenuPointer("+contents_ind+")", g_PointerTimeout);
	else
		StopMoveMenuPointer();	
}

function StopMoveMenuPointer()
{
	clearTimeout(g_MenuPointerTimer);
	g_MenuPointerTimer = null;
}

var g_BMenuPointerTimer = null;
var g_BMenuPointerSpeed = 3;
var g_BPointerTimeout = 20;
function MoveBottomMenuPointer(sub_ind)
{
	// sub_ind is 0-based
	// if sub_ind=-1 => move pointer to -1000px i.e. out of visible page
	var pointer = document.getElementById("bottom_menu_pointer");
	var x = parseInt(pointer.style.left, 10);
	if (x < 0) x = MenuContents.BPointer.Left - g_BMenuPointerSpeed * 10;
	var delta_correction = (sub_ind < 9) ? 0 : 8;
	var target_x = (sub_ind == -1) ? MenuContents.BPointer.Left :
		MenuContents.BPointer.Left + MenuContents.BPointer.Delta * sub_ind + delta_correction*(sub_ind-9);
	
	var new_x = (x > target_x)?
		Math.max(x-g_BMenuPointerSpeed, target_x) :	// need to move left
		Math.min(x+g_BMenuPointerSpeed, target_x);	// need to move right
	
	// Set new position
	pointer.style.left = new_x.toString() + "px";
	
	// Keep moving
	if(new_x != target_x)
		g_BMenuPointerTimer = setTimeout("MoveBottomMenuPointer("+sub_ind+")", g_BPointerTimeout);
	else
		StopBottomMoveMenuPointer();	
}

function StopBottomMoveMenuPointer()
{
	clearTimeout(g_BMenuPointerTimer);
	g_BMenuPointerTimer = null;
}


//http://brainerror.net/scripts/javascript/blendtrans/
function ChangeOpacity(id, opacStart, opacEnd, millisec) { 
	//speed for each frame 
	var speed = Math.round(millisec / 100); 
	var timer = 0; 

	//determine the direction for the blending, if start and end are the same nothing happens 
	if(opacStart > opacEnd) { 
		for(i = opacStart; i >= opacEnd; i--)
			setTimeout("SetOpacity('" + id + "'," + i + ")",(++timer * speed)); 
	} else if(opacStart < opacEnd) { 
		for(i = opacStart; i <= opacEnd; i++) 
			setTimeout("SetOpacity('" + id + "'," + i + ")",(++timer * speed)); 
	} 
} 
function SetOpacity(id, opacity) 
{	// Cross-browser function
	// opacity from 0 (transparent) to 100 (opaque)
	var style_obj = document.getElementById(id).style; 
	style_obj.opacity = (opacity / 100); 
	style_obj.MozOpacity = (opacity / 100); 
	style_obj.KhtmlOpacity = (opacity / 100); 
	style_obj.filter = "alpha(opacity=" + opacity + ")"; 
}