<?php 

include 'header.php'; 

?>

<div id="main"> <br />
  <h2 align="center">Create your own custom memory for race day with Stripes for the Cure!<br />
    We will donate 25% of the proceeds to your Komen race affiliate to help find a cure for cancer!<br />
    Honor your loved ones today!</h2>
  <div id="rightcol">
    <div id="stripepreview">
      <div class="hidden"> 
        <script type="text/javascript">
		<!--//--><![CDATA[//><!--

			if (document.images) {
				img1 = new Image();
				img2 = new Image();
				img3 = new Image();
				img4 = new Image();
				img5 = new Image();
				img6 = new Image();
				img7 = new Image();
				img8 = new Image();
				img9 = new Image();
				
				img1.src = "images/web/pink.png";
				img2.src = "images/web/white.png";
				img3.src = "images/web/blank.png";
				img5.src = "images/web/Logo.png";
				img6.src = "images/web/Race.png";
				img7.src = "images/web/ribbon.png";
				img8.src = "images/web/race_dallas.png";
				img9.src = "images/web/race_denver.png";
			}

		//--><!]]>
	</script> 
      </div>
      <div id="imagedest2"> </div>
      <div id="imagedest1"> </div>
      <div id="imagedest"> </div>
      <div id="customtxt"> <span id="line1"></span><br>
        <span id="line2"></span><br>
      </div>
      <div id="customtxt2"> <span id="line3"></span><br>
        <span id="line4"></span><br>
      </div>
    </div>
    <div> <br />
      <center>
        <font size="2"><em>Item depicted is only a representation. Production item may slightly differ.</em></font>
      </center>
      <br />
    </div>
    <form action="order.php" method="post" enctype="multipart/form-data"  >
      <div id="options">
        <div id="leftcolopt" style="height:255px;">
          <h2><img src="images/1.png" alt="Stripes Step 1"  />Background Options</h2>
          <ul>
            <li>
              <label for="white"><img src="/images/web/buttons/button_white.png" ></label>
              <input type="radio" id="white" value="white" name="background"  onclick='check_value(1)'>
            </li>
            <li>
              <label for="pink"><img src="/images/web/buttons/button_pink.png" ></label>
              <input type="radio" id="pink" value="pink" name="background"  onclick='check_value(2)'>
            </li>
          </ul>
        </div>
        <div id="middlcolopt" style="height:255px;">
          <h2><img src="images/2.png" alt="Stripes Step 2"  />Write Your Message</h2>
          <ul>
            <li>
              <input class="text" type="text" name="line1" id="box1" onkeyup="updateTxt('box1','line1');" onfocus="if(this.value == 'Line 1 Text') { this.value = ''; }" value="Line 1 Text" maxlength="20">
            </li>
            <li>
              <input class="text" type="text" name="line2" id="box2" onkeyup="updateTxt('box2','line2');" onfocus="if(this.value == 'Line 2 Text') { this.value = ''; }" value="Line 2 Text" maxlength="20">
            </li>
          </ul>
        </div>
        <div id="rightcolopt" style="height:255px;">
          <h2><img src="images/3.png" alt="Stripes Step 3"  />Choose Your Affiliate</h2>
          <ul>
            <li>
              <label for="race_dallas"><img src="/images/web/dallas.png" ></label>
              <input type="radio" id="race_dallas" value="race_dallas" name="logo"  onclick='check_value(10)'>
            </li>
            <!--	<li>
              <label for="race_denver"><img src="/images/web/denver.png" ></label>
              <input type="radio" id="race_denver" value="race_denver" name="logo"  onclick='check_value(11)'>
            </li>	-->
          </ul>
        </div>
        <div id="leftcolopt" style="height:255px;">
          <h2><img src="images/4.png" alt="Stripes Step 4"  />Your Custom Image or Race Logo</h2>
          <ul>
            <li> <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
              <label for="custom"><img src="/images/web/buttons/button_custom.png"></label>
              <input type="radio" id="custom"  value="custom" name="imageopt"  onclick='check_value(9)'>
              </a>
              <div id="light" class="white_content">Please use a high resolution, portrait or square photo (Preferably 300dpi) for best results. It will give the final product a cleaner look.<br />
                <input type='file' name="image" onchange="readURL(this);" />
                <img id="blah2" src="#" alt="your image" height="150" /> </span> <br />
                <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close and Upload Image</a></div>
              <div id="fade" class="black_overlay"></div>
            </li>
            <li>
              <label for="race"><img src="/images/web/buttons/button_Race.png" ></label>
              <input type="radio" id="race" value="race" name="image"  onclick='check_value(6)'>
            </li>
          </ul>
          <input type="hidden" name="racelocation" value="<?php echo $location; ?>">
        </div>
      </div>
      <input TYPE="image" SRC="images/web/buttons/ordernow.png" 
               WIDTH="324"  HEIGHT="134" 
              BORDER="0" ALT="SUBMIT!" name="formSubmit" value="Submit" onclick="validate();" style="float: right;"/>
    </form>
  </div>
</div>
<?php  

include 'footer.php'; 

?>
