<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>General Compass Draw Overview</title>
		 <link rel="SHORTCUT ICON" href="public/styles/cdlogoicon.png"/>
    	<link href="public/styles/tournamentareasstyles.css" rel="stylesheet" type="text/css" />
    	<link href="public/styles/compassdrawstyles.css" rel="stylesheet" type="text/css" />
		<style>
			ul li {
				margin-bottom: .2em;
			}
		</style>
		<script>
		    var index=-1;
			function SlideData(text, img){
				this.Text = text;
				this.Image = img;
			}
			var slides = new Array()
			slides.push(new SlideData("Click the 'Log-in' Button.", "public/styles/RegisterForSingles1.png"));
			slides.push(new SlideData("Enter your user ID and password and then click the 'Log-in' Button", "public/styles/RegisterForSingles2.png"));
			slides.push(new SlideData("Click on the link for the tournament you want to register for.", "public/styles/RegisterForSingles3.png"));
			slides.push(new SlideData("Click on the 'Buy Now' Button next to the division you want to register for.", "public/styles/RegisterForSingles4.png"));
			slides.push(new SlideData("Click the 'Continue with this transaction' Button.", "public/styles/RegisterForSingles5.png"));
			slides.push(new SlideData("To pay by credit card, click on the 'Don’t have a PayPal account?' link. ", "public/styles/RegisterForSingles6.png"));
			slides.push(new SlideData("Enter your credit card information and click the 'Review and continue' Button.", "public/styles/RegisterForSingles7.png"));
			slides.push(new SlideData("Click the 'Pay Now' Button to complete the transaction.  That's it!", "public/styles/RegisterForSingles8.png"));

		    function nextImage(){
                index++;
                if (index > slides.length-1){
                    //this prevents an accidental double-click of the next button
                    index=slides.length-1;
                }
		        document.getElementById("HelpImage").src=slides[index].Image;
		        document.getElementById("ImageText").innerHTML=slides[index].Text;
		        if (index==0){
		            document.getElementById("btnPrev").disabled=true;
		        }else if(index==slides.length-1){
		            document.getElementById("btnNext").disabled=true;
		        }else{
		            document.getElementById("btnPrev").disabled=false;
		            document.getElementById("btnNext").disabled=false;
		        }        
		    }
		    function prevImage(){
                index--;
                if (index<= 0){
                    //this prevents an accidental double-click of the prev button
                    index=0;
                }
		        document.getElementById("HelpImage").src=slides[index].Image;
		        document.getElementById("ImageText").innerHTML=slides[index].Text;
		        if (index==0){
		            document.getElementById("btnPrev").disabled=true;
		        }else if(index==slides.length-1){
		            document.getElementById("btnNext").disabled=true;
		        }else{
		            document.getElementById("btnPrev").disabled=false;
		            document.getElementById("btnNext").disabled=false;
		        }        
		    }
		</script>
	</head>
	<body onload="nextImage()">
	
        <div style="width:600px; padding-bottom:0px; font-size:larger; font-family:Arial Black; color:#094">
            How to register for singles
        </div>
        <div style="width:600px; padding-bottom:10px; font-size:small; font-family:Arial; color:#777">
            You need to already have a user ID to register for a tournament.  If you don't have one, click the "Sign me up!" Button on the home page and follow the instructions.
        </div>
        <div style="width:600px; height:500px; padding-bottom:10px;">
            <img id="HelpImage" height="500px" />
        </div>
        <div  style="width:650px; text-align:left">
            <button id="btnPrev" style="font-family:Cooper Black" onclick="prevImage()">&nbsp;<&nbsp;</button>
            <button id="btnNext" style="font-family:Cooper Black" onclick="nextImage()">&nbsp;>&nbsp;</button>
            <span id="ImageText" style="font-family:Arial Black; font-size:small; " ></span>
        </div>
	</body>
</html>


�