window.addEvent('domready', function() {
	var status = {
		'true': 'open',
		'false': 'close'
	};
	
	

	//--horizontal
	var myHorizontalSlide = new Fx.Slide('zchmContent', {mode: 'horizontal'});
	myHorizontalSlide.hide();
	
	$('most').addEvent('click', function(e){
			e.stop();
			if(status[myHorizontalSlide.open]=="close"){
				myHorizontalSlide.slideIn();
			}
			getMaps('mostPopular')
			
		});
	$('africa').addEvent('click', function(e){
			e.stop();
			if(status[myHorizontalSlide.open]=="close"){
				myHorizontalSlide.slideIn();
			}
			getMaps('africa')
			
		});
	$('provincial').addEvent('click', function(e){
			e.stop();
			if(status[myHorizontalSlide.open]=="close"){
				myHorizontalSlide.slideIn();
			}
			getMaps('provincial')
			
			
		});
	$('world').addEvent('click', function(e){
			e.stop();
			if(status[myHorizontalSlide.open]=="close"){
				myHorizontalSlide.slideIn();
			}
			getMaps('world')
			
			
		});
	/*$('street').addEvent('click', function(e){
			e.stop();
			if(status[myHorizontalSlide.open]=="close"){
				myHorizontalSlide.slideIn();
			}
			getMaps('street')
			
		});*/
	$('regional').addEvent('click', function(e){
			e.stop();
			if(status[myHorizontalSlide.open]=="close"){
				myHorizontalSlide.slideIn();
			}
			getMaps('regional')
			
		});
	$('country').addEvent('click', function(e){
			e.stop();
			if(status[myHorizontalSlide.open]=="close"){
				myHorizontalSlide.slideIn();
			}
			getMaps('country')
			
		})
	
	
	$('hideOptions').addEvent('click', function(e){
			e.stop();
			myHorizontalSlide.slideOut();
		});
	
	
	
	$('gotostep2').addEvent('click', function(e){
			e.stop();
			myHorizontalSlide.slideOut();
			showLayers('step2ON')
			document.getElementById("designOption").style.display = 'block';
		});

	$('gotostep22').addEvent('click', function(e){
			e.stop();
			myHorizontalSlide.slideOut();
			showLayers('step2ON')
			if(document.getElementById("extentInfo").value == ""){		//Show prompt if no map extent defined
				document.getElementById("designOption").style.display = 'block'
			}		
			
		});
	
	if(document.getElementById("cr1") != null){
		$('cr1').addEvent('click', function(e){
				e.stop();
				myHorizontalSlide.slideOut();
				showLayers('step2ON')
				document.getElementById("designOption").style.display = 'block'
		});
	}
	
	
	
	
	
	
	var myVerticalSlide = new Fx.Slide('bTips');
	myVerticalSlide.hide();
	
	$('tDrawExtent').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.slideIn();
		
		getTip("drawExtent");
	});
	
	$('tEditExtent').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.slideIn();
		
		getTip("editExtent");
	});
	
	$('tZoom').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.slideIn();
		
		getTip("zoom");
	});
	
	$('tPan').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.slideIn();
		
		getTip("pan");
	});
	
	$('tDrawPolygon').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.slideIn();
		
		getTip("drawPolygon");
	});
	
	$('tEditPolygon').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.slideIn();
		
		getTip("editPolygon");
	});
	
	$('tPoint').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.slideIn();
		
		getTip("point");
	});
	
	$('tLine').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.slideIn();
		
		getTip("line");
	});
	
	$('tDeleteAll').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.slideIn();
		
		getTip("delete");
	});
	$('hideBTips').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.slideOut();
	});

	
	
	
	
});



function getTip(theType){
	
	var showTitle = ""
	var theTip = ""
	if(theType=="drawExtent"){
		showTitle = "Draw Extent"
		theTip = "Click on the map and drag a box around the area you'd like to cover.<br />  You can then edit the area by selecting the 'Edit Map Extent' tool from the toolbox."
	}else if(theType=="editExtent"){
		showTitle = "Edit Extent"
		theTip = "Click on the map extent you would like to edit to highlight it.<br />Click and drag the centre point to move it, or click and drag the bottom-right point to resize it."
	}else if(theType=="zoom"){
		showTitle = "Zoom Tool"
		theTip = "Click on the map and drag a box around the area you'd like to zoom in to."
	}else if(theType=="pan"){
		showTitle = "Pan Tool"
		theTip="Click and drag the map to pan around"
	}else if(theType=="drawPolygon"){
		showTitle = "Draw Polygon"
		theTip="Click on the map to begin drawing a shape.  Click various points around your shape until you<br /> have covered the area required.  Double-click to complete your shape.<br />You can edit the shape by selecting the 'Edit Polygon' tool from the toolbox."
	}else if(theType=="editPolygon"){
		showTitle = "Edit Polygon"
		theTip="Click on the polygon/shape you'd like to edit.<br />Click and drag centre point to move it, or click the highlighted points and drag them to move a<br /> side of the shape."
	}else if(theType=="point"){
		showTitle = "Draw Points"
		theTip = "<div><div style='width=600px;' >Click on the map to place a point.  Hover your mouse over a point and click+drag to move it.<br />  Click on a point and click on 'Delete' in the toolbox to remove it.<br/>Select a point style  <a href='javascript:setPointSymbol(\"star\")'><img src='images/pointStar.jpg' /></a> | <a href='javascript:setPointSymbol(\"cross\")'><img src='images/pointPlus.jpg' /></a> | <a href='javascript:setPointSymbol(\"circle\")'><img src='images/pointCircle.jpg' /></a> | <a href='javascript:setPointSymbol(\"square\")'><img src='images/pointSquare.jpg' /></a> | <a href='javascript:setPointSymbol(\"triangle\")'><img src='images/pointTriangle.jpg' /></a> | <a href='javascript:setPointSymbol(\"x\")'><img src='images/pointX.jpg' /></a></div><div id='symbolLabel' style='display:none;position:absolute;background:#333333;border:4px solid #FFFFFF;z-index:999999;padding:5px 15px 5px 15px;left:30px;bottom:30px;' >Enter a label for your point before placing on the map (Optional): <input type'text' name='symbolLabelText' id='symbolLabelText' value='' size='10' maxlength='50'/></div></div>"
		//theTip = "Click on the map to place a point.  Hover your mouse over a point and click+drag to move it.<br />  Click on a point and click on 'Delete' in the toolbox to remove it.<br/>Define style here <a href='javascript:setPointSymbol(\"star\")'>star</a> | <a href='javascript:setPointSymbol(\"cross\")'>+</a> | <a href='javascript:setPointSymbol(\"circle\")'>circle</a> | <a href='javascript:setPointSymbol(\"square\")'>square</a> | <a href='javascript:setPointSymbol(\"triangle\")'>triangle</a> | <a href='javascript:setPointSymbol(\"x\")'>x</a>"
	}else if(theType=="line"){
		showTitle = "Draw Lines"
		theTip = "Click a point in the map to begin drawing a line.  Click another point to draw your line.<br />Once you've finished drawing a line, double-click to end it."
	}else if(theType=="delete"){
		showTitle = "Delete Extent / Polygon / Line / Point"
	}
	document.getElementById("tipTitle").innerHTML = showTitle;	
	document.getElementById("tipTip").innerHTML = theTip;
	UnTip()
}