var current;
var imgDir = "http://world-map.santafish.org/images/";
var hasDungeons;
var fullWorldMap;

function show_hide( id, action ) {
	if( !document.getElementById( id ) ) {
		return;	
	}
	
    var display = document.getElementById( id ).style.display;
    
    if ( action == 'toggle' ) {
        if ( display == 'none' || !display ) {
            document.getElementById( id ).style.display = 'block';
        }
        else if ( display == 'block' ) {
            document.getElementById( id ).style.display = 'none';
        }
    }
    else{
        document.getElementById(id).style.display = action;    
    }
}

function create_titles() {
	var elements = document.getElementsByTagName( 'img' );
	var title = '';
	
	for( var i = 0; i < elements.length; i++ ) {
		title = elements[i].getAttribute( 'alt' ) !== '' ? elements[i].getAttribute( 'alt' ) : '';
		elements[i].setAttribute( 'title', title );
	}	
	
	elements = document.getElementsByTagName( 'area' );
	
	for( i = 0; i < elements.length; i++ ) {
		title = elements[i].getAttribute( 'alt' ) !== '' ? elements[i].getAttribute( 'alt' ) : '';
		elements[i].setAttribute( 'title', title );
	}	
}

function build_map_nav() {
	var compiled = '';
	var row = '';
	var menu = null;
	
	for( var i = 0; i < navList.length; i++ ){
		menu = navList[i];
		
		if( !menu || menu === null ) {
			continue;
		}
		var rowId = 'keyRow_' + i;
		var cellId1 = 'keyCell_' + i + '_1';
		var cellId2 = 'keyCell_' + i + '_2';
		var htmlRow = document.createElement( 'tr' );
		var htmlCell1 = document.createElement( 'td' );		
		var htmlCell2 = document.createElement( 'td' );
		
		htmlRow.setAttribute( 'id', rowId );
		document.getElementById( 'keyContent' ).appendChild( htmlRow );
		
		htmlCell1.setAttribute( 'id', cellId1 );
		htmlCell1.className = 'col1';
		document.getElementById( rowId ).appendChild( htmlCell1 );
		
		htmlCell2.setAttribute( 'id', cellId2 );
		htmlCell2.className = 'col2';
		document.getElementById( rowId ).appendChild(htmlCell2);
		
		var text1 = '<img src="' + imgDir + 'icons/' + menu[0] + '" alt="' + menu[1] + ' Icon" title="' + menu[1] + ' Icon" width="15" height="15" />';
		var text2 = '<a href="#" target="_top" onclick="show_extra(\'' + i + '\');return false;" title="Click to show more information">' + menu[1] + '</a>';
		
		document.getElementById( cellId1 ).innerHTML = text1;
		document.getElementById( cellId2 ).innerHTML = text2;
	}
}

function reset_dungeon( fullWorldMap ) {

	var columns;
	var rows;
	if(fullWorldMap){
		columns = 9;
		rows = 11;
	}else{
		columns = 3;
		rows = 4;
	}
	var offset = 100;
	var row;
	var dungeonRowId;
	var htmlRow;
	var column;
	var dungeonCellId;
	var dungeonMapId;
	var htmlCell;
	var htmlMap;
	var imgText;
	var image;
	var child = null;
	
	while( ( child = document.getElementById( 'dungeonLayer' ).childNodes[0] ) != null ) {
		document.getElementById( 'dungeonLayer' ).removeChild( child );
	}

	for(var i = 0; i < columns; i++) {
		row = i + offset;
		dungeonRowId = 'dungeonRow_' + row;
		htmlRow = document.createElement( 'tr' );
		
		htmlRow.setAttribute( 'id', dungeonRowId );
		document.getElementById( 'dungeonLayer' ).appendChild( htmlRow );
				
		for(var j = 0; j < rows; j++) {
			column = j + offset;
			dungeonCellId = 'dungeonCell_R'+row+'_C'+column;
			dungeonMapId = 'dungeonMap_R'+row+'_C'+column;
			htmlCell = document.createElement( 'td' );
			htmlCell.setAttribute( 'id', dungeonCellId );
			
			htmlMap = document.createElement( 'map' );
			htmlMap.setAttribute( 'id', dungeonMapId );
			htmlMap.setAttribute( 'name', dungeonMapId );
			
			htmlRow.appendChild( htmlCell );
			
			// Create our image
			image = document.createElement( "div" );
			image.className = "dummySquare";			
			image.appendChild( htmlMap );
			htmlCell.appendChild( image );
		}
	}
}

function create_dungeon_titles( dungeonId ) {
	var elements = document.getElementById( 'dungeonwrap' ).getElementsByTagName( 'img' );
	var title = '';
	
	for( var i = 0; i < elements.length; i++ ) {
		elements[i].setAttribute( 'title', dungeonList[dungeonId][1] );
	}	
	
	elements = document.getElementById( 'dungeonwrap' ).getElementsByTagName( 'area' );
	
	for( i = 0; i < elements.length; i++ ) {
		title = elements[i].getAttribute( 'alt' ) !== '' ? elements[i].getAttribute( 'alt' ) : '';
		elements[i].setAttribute( 'title', title );
	}	
}

function show_dungeon( dungeonId, fullWorldMap ) {
	var hideText = 'Hide ' + dungeonList[dungeonId][1];
	
	if(hideText == document.getElementById( 'currentDungeonLink' ).innerHTML) {
		show_hide( 'dungeonwrap', 'toggle' );
		document.getElementById( 'currentDungeonLink' ).innerHTML = hideText;
		show_hide( 'currentDungeon', 'toggle' );
	} else {
		build_dungeon( dungeonId, fullWorldMap );
		show_hide( 'dungeonwrap', 'block' );
		document.getElementById( 'currentDungeonLink' ).innerHTML = hideText;
		show_hide( 'currentDungeon', 'block' );
	}
}

function build_dungeon_list( fullWorldMap ) {
	var compiled = '';
	var row = '';
	var menu = null;
	var rowId;
	var cellId;
	var htmlRow;
	var htmlCell;
	var text = "";
	var link;
	
	for( var i = 0; i < dungeonList.length; i++ ){
		menu = dungeonList[i];
		
		if( !menu || menu === null ) {
			continue;
		}
		rowId = 'dungeonRow_' + i;
		
		cellId = 'dungeonCell_' + i + '_1';
		htmlRow = document.createElement( 'tr' );
		htmlCell = document.createElement( 'td' );		
		
		htmlRow.setAttribute( 'id', rowId );
		document.getElementById( 'dungeonListContent' ).appendChild( htmlRow );
		
		htmlCell.setAttribute( 'id', cellId );
		htmlCell.className = 'dungeoncol';
		document.getElementById( rowId ).appendChild( htmlCell );
		
		link = document.createElement( "a" );
		link.setAttribute( "href", "#" );
		link.setAttribute( "taget", "_top" );
		link.setAttribute( "title", "Click to show " + menu[1] );
		link.innerHTML = menu[0];
		link.dungeonId = i;
		
		if(i < 1) {
			link.onclick = function() {
				show_hide( "dungeonwrap", "none" );
				show_hide( "currentDungeon", "none" );
				return false;
			};
		} 
		else if(i > 0) {
			link.onclick = function() {
				show_dungeon( this.dungeonId, fullWorldMap );
				return false;
			};
		}
		
		document.getElementById( cellId ).innerHTML = "";
		document.getElementById( cellId ).appendChild( link );
	}
}

function build_dungeon( dungeonId, fullWorldMap ) {
	var dungeon = dungeonList[dungeonId];
	
	reset_dungeon( fullWorldMap );
	
	if( dungeon.length >= 6 ) {	
		for(var i = 2; i < dungeon.length; i++) {
			var row = dungeon[i++];
			var column = dungeon[i++];
			var dungeonCellId = 'dungeonCell_R'+row+'_C'+column;
			var dungeonMapId = 'dungeonMap_R'+row+'_C'+column;
			var imgTarget = document.getElementById( dungeonCellId );
			var mapTarget = document.getElementById( dungeonMapId );
			var image = document.createElement( "img" );
						
			// Set up our image
			image.setAttribute( "src", imgDir + "/dungeons/" + dungeon[i++] );
			image.setAttribute( "alt", "Dungeons" );
			image.setAttribute( "title", "Dungeons" );
			image.setAttribute( "width", "800" );
			image.setAttribute( "height", "800" );
			image.setAttribute( "usemap", "#" + dungeonMapId );
			image.className = "dungeonimg";
						
			// Clear the content cell... is this needed anymore?
			
			// Write image to cell
			imgTarget.firstChild.appendChild( image );
			
			// Append new DIV delement (with map content) to our map element
			mapTarget.innerHTML = dungeon[i];
		}
	}
	
	// Hack for getting the wrapper to render in IE
	document.getElementById( 'dungeonwrap' ).innerHTML += " ";
	create_dungeon_titles( dungeonId );
}

//to hopefully make adding future dungeons a less tedious task by linking via name rather than ID
function find_dungeon_id( dungeonName, fullWorldMap ) {
	var i = 0;
	
	while (i < dungeonList.length && dungeonName != dungeonList[i][1]) {
		i++;
	}
	
	show_dungeon(i,fullWorldMap);
}

function show_surface() {
	show_hide( "dungeonwrap", "none" );
	show_hide( "currentDungeon", "none" );
	return false;
}

function do_resize() {
	var tbody = document.getElementById( 'infoBody' );
	var header = document.getElementById( 'infoHeader' );
	var wrapper = document.getElementById( 'infoContainer' );
	var content = document.getElementById( 'infoContent' );
	var MAX_HEIGHT = 310;
	var MAX_SCROLL_HEIGHT = 375;

	if( content.offsetHeight > MAX_HEIGHT ) {
		wrapper.style.height = ( MAX_SCROLL_HEIGHT ) + 'px';
		tbody.style.height = ( MAX_HEIGHT ) + 'px';
	}
	else {
		wrapper.style.height = ( header.offsetHeight + content.offsetHeight + 10 ) + 'px';
		tbody.style.height = ( content.offsetHeight + 4 ) + 'px';
	}
}

function show_extra( key ) {
	var wrapper = 'infowrap';
	var wrapper_el = document.getElementById( wrapper );
	var content = document.getElementById( 'infoContainer' );
	var template = '<table class="scrollTable" cellspacing="0"><thead id="infoHeader"><tr><th colspan="4"><p class="left">Information</p><p class="right"><a href="#" target="_top" onclick="show_hide(\'infowrap\', \'none\');return false;" title="Close">[X]</a></p></th></tr><tr><th><img src="' + imgDir + 'icons/<#ICON#>" width="15" height="15" alt="<#ALT#>" title="<#TITLE#>" /></th><th><#NAME#></th</tr</thead><tbody id="infoBody"><tr><td colspan="2"><div id="infoContent"><#DESCRIPTION#></div></td></tr></tbody></table>';
	
	if( ( wrapper_el.style.display == 'block' && key != current ) || wrapper_el.style.display != 'block' ) {
		current = key;
	}
	else if( wrapper_el.style.display == 'block' && key == current ) {
		show_hide( wrapper, 'none' );
		return;
	}
	
	template = template.replace( '<#ICON#>', navList[key][0]  );
	template = template.replace( '<#NAME#>', navList[key][1]  );
	template = template.replace( '<#DESCRIPTION#>', navList[key][2]  );
	template = template.replace( '<#ALT#>', navList[key][1] + ' Icon'  );
	template = template.replace( '<#TITLE#>', navList[key][1] + ' Icon'  );
	content.innerHTML = template;
	show_hide( wrapper, 'block' );	
	do_resize();
}

function make_transparent( element, flag ) {
	var theElement = document.getElementById( element );
	
	if( flag == 1 ) {
		if( typeof theElement.style.opacity == 'string' ) {
			theElement.style.opacity = 0.5;
		}
	}
	else {
		if( typeof theElement.style.opacity == 'string' ) {
			theElement.style.opacity = 1.0;
		}
	}
}

function init( fullWorldMap ) {	
	document.getElementById( 'keyLink' ).onclick = function() {
		show_hide( 'keywrap', 'toggle' );
		return false;
	};
	
	document.getElementById( 'closeKey' ).onclick = function() {
		show_hide( 'keywrap', 'none' );
		return false;
	};
	
	initKey();
	build_map_nav();
	create_titles();
	
	//if( hasDungeons ) {
		document.getElementById( 'dungeonLink' ).onclick = function() {
			show_hide( 'dungeonlistwrap', 'toggle' );
			return false;
		};
		
		document.getElementById( 'closeDungeonList' ).onclick = function() {
			show_hide( 'dungeonlistwrap', 'none' );
			return false;
		};
		
		document.getElementById( 'currentDungeon' ).onclick = function() {
			show_hide( 'dungeonwrap', 'none' );
			show_hide( 'currentDungeon', 'none' );
			return false;
		};
		
		initDungeons();
		build_dungeon_list( fullWorldMap );
	//}
}