<?php                                         
 
 $v=$_GET['v'];
 
             
 if ($v==""){            
             $wpdb->insert( 
	                         $wpdb->prefix . "clickbar", 
	                         array( 
		                             'ClickBarName' => 'My ClickBar' 
	                              ));
                                      
             $wpdb->query( $sql );
             
             
             $I=mysql_insert_id();
             
             //$re=mysql_query("UPDATE ".$wpdb->prefix . "socivids_videos SET VideoName='Video $I' WHERE V_ID='$I' ");
             $re=$wpdb->query($sql);
             $v=$I;
            }
 
$re=" SELECT * FROM ".$wpdb->prefix . "clickbar WHERE C_ID='$v' ";
$row = $wpdb -> get_results($re);
foreach( $row as $rows ) {
                         $ClickBarName=$rows->ClickBarName;
                         $CountDownDate=$rows->CountDownDate;
                         $BarText=$rows->BarText;
                         $ButtonText=$rows->ButtonText;
                         $BarColor=$rows->BarColor;
                         $BarTexture=$rows->BarTexture;
                         $RedirectURL=$rows->RedirectURL;
                         $Position=$rows->Position;
                         $EndText=$rows->EndText;
                         $CountDownTime=$rows->CountDownTime;
                         $BarTextColor=$rows->BarTextColor;
                         }                         
 
if ($BarTextColor==""){$BarTextColor="000000";}
if ($BarColor==""){$BarColor="990000";}
?>
<form method="post" action="<?php echo $PGPath; ?>docreatenew.php">
<input type="hidden" name="v" value="<?php echo $v; ?>">
<table>
 <tr>
  <td>Bar Name</td><td><input type="text" name="ClickBarName" value="<?php echo $ClickBarName; ?>" style="width:350px;"></td>
 </tr> 
 

 <tr>
  <td>Bar Color</td><td><input name="BarColor" id="BarColor" class="color" onchange="UpdateColor();" value="<?php echo $BarColor; ?>"></td>
 </tr>  
 
 <tr>
  <td>Countdown Date</td><td><input type="text" name="CountDownDate" id="CountDownDate" value="<?php echo $CountDownDate; ?>" style="width:150px;"></td>
 </tr> 
 
 <tr>
 <td>Countdown Time</td><td>
                     <select name="CountDownTime" id="CountDownTime" onchange="UpdateColor();">
                      <option value="0" <?php if ($CountDownTime=="0"){echo "selected='selected'";} ?>>Midnight</option>
                      <option value="1" <?php if ($CountDownTime=="1"){echo "selected='selected'";} ?>>1:00am</option>
                      <option value="2" <?php if ($CountDownTime=="2"){echo "selected='selected'";} ?>>2:00am</option>
                      <option value="3" <?php if ($CountDownTime=="3"){echo "selected='selected'";} ?>>3:00am</option>
                      <option value="4" <?php if ($CountDownTime=="4"){echo "selected='selected'";} ?>>4:00am</option>
                      <option value="5" <?php if ($CountDownTime=="5"){echo "selected='selected'";} ?>>5:00am</option>
                      <option value="6" <?php if ($CountDownTime=="6"){echo "selected='selected'";} ?>>6:00am</option>
                      <option value="7" <?php if ($CountDownTime=="7"){echo "selected='selected'";} ?>>7:00am</option>
                      <option value="8" <?php if ($CountDownTime=="8"){echo "selected='selected'";} ?>>8:00am</option>
                      <option value="9" <?php if ($CountDownTime=="9"){echo "selected='selected'";} ?>>9:00am</option>
                      <option value="10" <?php if ($CountDownTime=="10"){echo "selected='selected'";} ?>>10:00am</option>
                      <option value="11" <?php if ($CountDownTime=="11"){echo "selected='selected'";} ?>>11:00am</option>
                      <option value="12" <?php if ($CountDownTime=="12"){echo "selected='selected'";} ?>>Noon</option>
                      <option value="13" <?php if ($CountDownTime=="13"){echo "selected='selected'";} ?>>1:00pm</option>
                      <option value="14" <?php if ($CountDownTime=="14"){echo "selected='selected'";} ?>>2:00pm</option>
                      <option value="15" <?php if ($CountDownTime=="15"){echo "selected='selected'";} ?>>3:00pm</option>
                      <option value="16" <?php if ($CountDownTime=="16"){echo "selected='selected'";} ?>>4:00pm</option>
                      <option value="17" <?php if ($CountDownTime=="17"){echo "selected='selected'";} ?>>5:00pm</option>
                      <option value="18" <?php if ($CountDownTime=="18"){echo "selected='selected'";} ?>>6:00pm</option>
                      <option value="19" <?php if ($CountDownTime=="19"){echo "selected='selected'";} ?>>7:00pm</option>
                      <option value="20" <?php if ($CountDownTime=="20"){echo "selected='selected'";} ?>>8:00pm</option>
                      <option value="21" <?php if ($CountDownTime=="21"){echo "selected='selected'";} ?>>9:00pm</option>
                      <option value="22" <?php if ($CountDownTime=="22"){echo "selected='selected'";} ?>>10:00pm</option>
                      <option value="23" <?php if ($CountDownTime=="23"){echo "selected='selected'";} ?>>11:00pm</option>
                     </select>
                    </td>
 </tr>                   
 
 <tr>
  <td>Bar Text</td><td><input type="text" name="BarText" id="BarText" value="<?php echo stripslashes($BarText); ?>" style="width:350px;" onkeyup="jQuery('#BarTextPreview').html(jQuery('#BarText').val());"></td>
 </tr> 
 
 <tr>
  <td>Bar Text Color</td><td><input name="BarTextColor" id="BarTextColor" class="color" onchange="UpdateColor2();" value="<?php echo $BarTextColor; ?>"></td>
 </tr>
 
 <tr>
  <td>Bar Texture</td><td>
                      <select name="BarTexture" id="BarTexture" onchange="ChangeTexture();">
                       <option value="0">None</option>
                       <option value="1" <?php if ($BarTexture=="1"){echo "selected='selected'";} ?>>1</option>
                       <option value="2" <?php if ($BarTexture=="2"){echo "selected='selected'";} ?>>2</option>
                       <option value="3" <?php if ($BarTexture=="3"){echo "selected='selected'";} ?>>3</option>
                       <option value="4" <?php if ($BarTexture=="4"){echo "selected='selected'";} ?>>4</option>
                       <option value="5" <?php if ($BarTexture=="5"){echo "selected='selected'";} ?>>5</option>
                       <option value="6" <?php if ($BarTexture=="6"){echo "selected='selected'";} ?>>6</option>
                       <option value="7" <?php if ($BarTexture=="7"){echo "selected='selected'";} ?>>7</option>
                       <option value="8" <?php if ($BarTexture=="8"){echo "selected='selected'";} ?>>8</option>
                       <option value="9" <?php if ($BarTexture=="9"){echo "selected='selected'";} ?>>9</option>
                       <option value="10" <?php if ($BarTexture=="10"){echo "selected='selected'";} ?>>10</option>
                      </select>
                      </td>
 </tr> 
 
 <tr>
  <td>Bar Position</td><td>
                      <select name="Position" id="Position">
                       <option value="0">Top of page</option>
                       <option value="1" <?php if ($Position=="1"){echo "selected='selected'";} ?>>Bottom of page</option>
                      </select>
                      </td>
 </tr> 
 
 <tr>
  <td>Button Text</td><td><input type="text" name="ButtonText" id="ButtonText" value="<?php echo stripslashes($ButtonText); ?>" onkeyup="jQuery('#ButtonPreview').html(jQuery('#ButtonText').val());" style="width:200px;"></td>
 </tr>
 
 <tr>
  <td>End Text</td><td><input type="text" name="EndText" id="EndText" value="<?php echo stripslashes($EndText); ?>" style="width:350px;"></td>
 </tr>
 
 <tr>
  <td>Redirect URL</td><td><input type="text" name="RedirectURL" id="RedirectURL" value="<?php echo stripslashes($RedirectURL); ?>" style="width:350px;"></td>
 </tr>
 <tr>
  <td colspan="2">
  <font style="color:#990000; font-weight:800; font-size:12px;">
      (Be sure to enter a full URL, including http://)
     </font>
  </td>   
 </tr>
 
 <tr>
  <td colspan="2"><input type="submit" style="padding:5px; font-weight:800;" value=" Save and exit "></td>
 </tr> 
</table>
</form>

<br>&nbsp;<br>

<?php
 if ($BarColor==""){$BarColor="#CC0000";}
 //$timeFirst  = strtotime(date('m/d/Y H:i:s'));
 //$timeSecond = strtotime($CountDownDate);
 //$Seconds = $timeSecond - $timeFirst;
 
 $Seconds="500000";
?>
     
     <div id="MainBar" style="width:1000px; margin-left:auto; margin-right:auto; background-color:#<?php echo $BarColor; ?>; background-image:url('<?php echo $PGPath; ?>textures/texture<?php echo $BarTexture; ?>.png');">
      <div style="width:250px; float:left; height:105px;">
       <table>
        <tr>
         <td width="250" height="105">
          <font style="font-size:24px; font-weight:900; font-family:sans-serif;"> 
            <div style="width:100%; color:#<?php echo $BarTextColor; ?>;" id="BarTextPreview">
             <?php echo stripslashes($BarText); ?>
            </div>
          </font>
         </td>
        </tr> 
       </table>
      </div>
      <div style="width:280px; float:right; height:105px;">
      <table>
        <tr>
         <td width="280" height="105">
          <button id="ButtonPreview" style="width:250px; font-size:22px; height:65px; float:right; border-radius: 10px; color:#000000;"><?php echo stripslashes($ButtonText); ?></button>
         </td>
        </tr>
       </table>  
      </div>
      <div style="width:460px; float:right;">
       <div class="clock" style="margin:2em;"></div>
      </div>
      
      
      
      <div style="clear:both;"></div>
    
     </div>
     
     <p>
     <center>
     <font style="color:#990000; font-weight:800; font-size:12px;">
      (Countdown time is for reference only and will not reflect your actual date in this preview)
     </font>
     </center>
     </p> 
     
 <script type="text/javascript">
			var clock;

			jQuery(document).ready(function() {


        $('#CountDownDate').datepicker();

				// Grab the current date
				var currentDate = new Date();

				// Set some date in the future. In this case, it's always Jan 1
				var futureDate  = new Date(currentDate.getFullYear() + 1, 0, 1);

				// Calculate the difference in seconds between the future and current date
				var diff = <?php echo $Seconds ?>

				// Instantiate a coutdown FlipClock
				clock = jQuery('.clock').FlipClock(diff, {
					clockFace: 'DailyCounter',
					countdown: true
				});
			});
		
      function UpdateColor(){
                             //alert('foo');
                             jQuery('#MainBar').css('background-color','#'+jQuery('#BarColor').val());
                            }
                            
      function UpdateColor2(){
                             //alert(jQuery('#BarTextColor').val());
                             jQuery('#BarTextPreview').css('color','#'+jQuery('#BarTextColor').val());
                            }
                                                  
      function ChangeTexture(){
                             //alert('foo');
                             jQuery('#MainBar').css('background-image',"url('<?php echo $PGPath; ?>textures/texture"+jQuery('#BarTexture').val()+".png')");
                            }                      
    </script>    