// used to support PNG images in both IE and NS
// writes correct tags to document inline
function png(src,width,height,style){
	document.write( PngGenerator(src,width,height,style));

}

function PngGenerator(src,width,height,style)
{
	if(is.ie){
		var styleAttr = "height:" + height + ";width:" + width + ";filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale');";
		return "<DIV STYLE=\"" + styleAttr + style + "\"></DIV>";
	} else {
		return "<img src='" + src + "' style='" + style + "' width='" + width + "' height='" + height + "'>";
	}
}

// Returns the string title of a product based on the city version string
function VersionToName(verString) {
	if (verString.indexOf("1.0") == 0) {
		return "SimCity 4 (original)";
	} else if (verString.indexOf("1.1") == 0) {
		return "SimCity 4 Deluxe / Rush Hour";
	} else {
		return "Unknown";
	}
}

// sets or appends the given content to the element
function setEltContent(elt,content,append){
	if(append){elt.innerHTML = elt.innerHTML + content;} 
	else {elt.innerHTML = content;}
}

// sets the x, y, width and height of the element in one shortcut function
function setEltBounds(elt,left,top,width,height){
	setEltLeft(elt,left);
	setEltTop(elt,top);
	setEltWidth(elt,width);
	setEltHeight(elt,height);
}

var CONTENT_WIDTH = 800;
var TOP_MARGIN = 0;

// the x value to be added to all relative x coords
function getXOffset(){return((getCurrentWinWidth() - CONTENT_WIDTH)/2);}

// the y value to be added to all relative y coords
function getYOffset(){return(TOP_MARGIN);}

// returns the adjusted X
function getAdjX(x){return(getXOffset() + x);}

// returns the adjusted Y
function getAdjY(y){return(getYOffset() + y);}

function repaintCommon() {
	moveEltTo(getElt("logo"),getAdjX(45),getAdjY(10));
	moveEltTo(getElt("reg_wing"),getAdjX(477),getAdjY(10));
	moveEltTo(getElt("reg_wing_in"),getAdjX(477),getAdjY(10));
	moveEltTo(getElt("home_btn"),getAdjX(20),getAdjY(83));
	moveEltTo(getElt("simcity4_btn"),getAdjX(20),getAdjY(394));
	moveEltTo(getElt("about_btn"),getAdjX(14),getAdjY(131));
	moveEltTo(getElt("news_info"),getAdjX(11),getAdjY(185));
	moveEltTo(getElt("hof_btn"),getAdjX(9),getAdjY(238));
	moveEltTo(getElt("bbs_btn"),getAdjX(11),getAdjY(290));
	moveEltTo(getElt("help_btn"),getAdjX(14),getAdjY(342));
	moveEltTo(getElt("btm_left"),getAdjX(53),getAdjY(447));
	moveEltTo(getElt("console_rt"),getAdjX(713),getAdjY(83));
	// Since footers need to appear in different positions on different pages,
	// I'm commenting this out:
	// moveEltTo(getElt("footerdiv"),getAdjX(113),getAdjY(605));
}

// used to write png rollover images with status and tool tip text
function pngRollover(id,srcOff,srcOn,width,height,onMsg,toolTip){
	if(toolTip != ''){
		document.write("<div id='" + id + "' onMouseOver=\"doPNGRollover('" + id + "','" + onMsg + "',true)\" onMouseOut=\"doPNGRollover('" + id + "','',false)\" title='" + toolTip + "'>");
	} else {
		document.write("<div id='" + id + "' onMouseOver=\"doPNGRollover('" + id + "','" + onMsg + "',true)\" onMouseOut=\"doPNGRollover('" + id + "','',false)\">");
	}
	
	if(is.ie){
		var styleAttr1 = "height:" + height + ";width:" + width + ";filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + srcOff + "',sizingMethod='scale');position:absolute;";
		document.write("<div id='" + id + "off' style=\"" + styleAttr1 + "\"></div>");
	
		var styleAttr2 = "height:" + height + ";width:" + width + ";filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + srcOn + "',sizingMethod='scale');position:absolute;visibility:hidden;";
		document.write("<div id='" + id + "on' style=\"" + styleAttr2 + "\"></div>");				
	
	} else {
		document.write("<img id='" + id + "off' src='" + srcOff + "' width='" + width + "' height='" + height + "' style='position:absolute;'>");
		document.write("<img id='" + id + "on' src='" + srcOn + "' width='" + width + "' height='" + height + "' style='position:absolute;visibility:hidden;'>");
	}
	
	document.write("</div>");
}

// used by the png rollovers to swap images
function doPNGRollover(eltId,msg,over){
	if(over){
		setEltVisibility(getElt(eltId + "off"),"hidden");
		setEltVisibility(getElt(eltId + "on"),"visible");
	} else {
		setEltVisibility(getElt(eltId + "on"),"hidden");
		setEltVisibility(getElt(eltId + "off"),"visible");	
	}
	window.status = msg;
}

// 
//  Below this are the tile image handlers -- be afraid
//

// implementation dependant function
function clearTileStates(eltId){
	clearTileState(eltId, "Avail");
	clearTileState(eltId, "Availclick");
	clearTileState(eltId, "Click");
	clearTileState(eltId, "Your");
}

//
function doTileRollover(eltId,msg,over){
	if(over){
		setEltVisibility(getElt(eltId + "off"),"visible");
		setEltVisibility(getElt(eltId + "on"),"visible");
	} else {
		setEltVisibility(getElt(eltId + "on"),"hidden");
		setEltVisibility(getElt(eltId + "off"),"visible");	
	}
	window.status = msg;
}

function toggleTileState(eltId, stateId){
	var tileStateElt = getElt(eltId + "State" + stateId);
	if(getEltVisibility(tileStateElt) == "hidden"){
		setEltVisibility(tileStateElt,"visible");
	} else {
		setEltVisibility(tileStateElt,"hidden");
	}
}

function setTileState(eltId, statId){
	setEltVisibility(getElt(eltId + "State" + stateId),"visible");
}

function clearTileState(eltId, stateId){
	// APP if -1, do nothing
	if (eltId != "tile-1") {
		setEltVisibility(getElt(eltId + "State" + stateId),"hidden");
	}
}

function tile(eltId,cityImg,cityW,cityH,statusMsg,styleAttr){
	document.write("<div id='" + eltId + "' onMouseOver=\"doTileRollover('" + eltId + "','" + statusMsg + "',true)\" onMouseOut=\"doTileRollover('" + eltId + "','',false)\" onClick=\"doTileClick('" + eltId + "')\" style=\"" + styleAttr + "\">");
	
	if(is.ie){
		<!-- rollover -->
		document.write("<div id='" + eltId + "off' style=\"height:" + cityH + ";width:" + cityW + ";filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + cityImg +"',sizingMethod='scale');position:absolute;\"></div>");
		document.write("<div id='" + eltId + "on' style=\"height:225;width:130;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/gui/selection_rollover.png',sizingMethod='scale');position:absolute;visibility:hidden;margin-top:-9;\"></div>");
		
		<!-- states -->
		document.write("<div id='" + eltId + "StateAvail' style=\"height:225;width:130;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/gui/selection_avail.png',sizingMethod='scale');position:absolute;visibility:hidden;margin-top:-9;\"></div>");
		document.write("<div id='" + eltId + "StateAvailclick' style=\"height:225;width:130;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/gui/selection_availclick.png',sizingMethod='scale');position:absolute;visibility:hidden;margin-top:-9;\"></div>");
		document.write("<div id='" + eltId + "StateClick' style=\"height:225;width:130;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/gui/selection_click.png',sizingMethod='scale');position:absolute;visibility:hidden;margin-top:-9;\"></div>");
		document.write("<div id='" + eltId + "StateYour' style=\"height:225;width:130;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/gui/selection_your.png',sizingMethod='scale');position:absolute;visibility:hidden;margin-top:-9;\"></div>");
	} else {
		<!-- rollover -->
		document.write("<img id='" + eltId + "off' src='" + cityImg +"' width='" + cityW + "' height='" + cityH + "' style='position:absolute;'>");
		document.write("<img id='" + eltId + "on' src='images/gui/selection_rollover.png' width='130' height='225' style='position:absolute;visibility:hidden;margin-top:-9;'>");
		
		<!-- states -->
		document.write("<img id='" + eltId + "StateAvail' src='images/gui/selection_avail.png' width='130' height='225' style='position:absolute;visibility:hidden;margin-top:-9;'>");
		document.write("<img id='" + eltId + "StateAvailclick' src='images/gui/selection_availclick.png' width='225' height='113' style='position:absolute;visibility:hidden;margin-top:-9;'>");
		document.write("<img id='" + eltId + "StateClick' src='images/gui/selection_click.png' width='130' height='225' style='position:absolute;visibility:hidden;margin-top:-9;'>");
		document.write("<img id='" + eltId + "StateYour' src='images/gui/selection_your.png' width='130' height='225' style='position:absolute;visibility:hidden;margin-top:-9;'>");				
	}
	
	document.write("</div>");
}