ashlynnpai · May 24, 2014 19:33
diff --git a/Astronomical-clock.markdown b/Astronomical-clock.markdown
diff --git a/index.html b/index.html
 <head>
 	<title></title>
 	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">

 </head>
 <body>

 <ul id="clock">	
    <li id="out"></li>
    <li id="zod"></li>
    <li id="sec"></li>
    <li id="hour"></li>
    <li id="min"></li>
 </ul>
    
 <!--<footer>Golden Hand image on hour hand -http://commons.wikimedia.org/wiki/File:Guante_Lambayeque.JPG Fotógrafo: © Manuel González Olaechea y Franco, -http://creativecommons.org/licenses/by/3.0/deed.en;
 Sun image on hour hand- http://apod.nasa.gov/apod/ap100923.html</footer>-->
 	<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
 	<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
 </body>
diff --git a/script.js b/script.js
 var hours;
 var hourDeg;
 var totaldays;
 var sunDeg;
 var months;
 var days;
 var startDeg;
 var seconds;
 var mins;

 //pulls the time locally and sets the images in motion

 $(function() {
 
      setInterval( function() {
      seconds = new Date().getSeconds();
      var sectick = "rotate(" + seconds * 6 + "deg)";
      $("#sec").css({ "transform": sectick });
          
      }, 1000 );
      
      setInterval( function() {
      hours = new Date().getHours();
      astroHours();
      var hourtick = "rotate(" + hourDeg + "deg)";
      $("#hour").css({ "transform": hourtick});
          
      }, 1000 );

      setInterval( function() {
      mins = new Date().getMinutes();
      var mintick = "rotate(" + mins * 6 + "deg)";
      
      $("#min").css({ "transform" : mintick });
          
      }, 1000 );
 
      setInterval( function() {
      var month = new Date().getMonth();
      months = month + 1;
      days = new Date().getDate();
      sunset();
      zodiac();
      var daytick = "rotate(" + sunDeg + "deg)";
      
      $("#out").css({ "transform" : daytick });
          
      }, 1000 );
 });


 // calculates the hour of day on the astronomical clock, noon is at 0 degrees
 function astroHours(){

    if (0 < hours < 12){
        hourDeg = 180 + 15*hours;
    }   
    else if (12 < hours <=24){
        hourDeg = 15*hours;
    }
 }

 //calculates degrees for outer ring estimating old Czech time  
 function sunset(){
   
    totaldays = months * 30.5 + days; 
    if (totaldays > 349 && totaldays <= 365) {
        sunDeg = 60 + ((totaldays - 349)*.42);
    }        
    else if (totaldays >= 0 && totaldays < 206){
        sunDeg = 60 + (totaldays *.42);
    }   
    else if (totaldays >= 206 && totaldays <= 349) {
        sunDeg = 139 - (totaldays *.42);
    }
 }

 //moves the zodiac dial
 function zodiac(){
    if (totaldays >= 21 && totaldays < 51) {
        startDeg = 300;
        //aquarius Jan 21
    }
    else if (totaldays >= 51 && totaldays < 81) {
        startDeg = 330;
        //pisces Feb 21
    }
    else if (totaldays >= 81 && totaldays < 111) { 
        startDeg = 0;
        //ares March 21
    }
    else if (totaldays >= 111 && totaldays < 141) {
        startDeg = 30;
        //taurus April 20
     }
    else if (totaldays >= 141 && totaldays < 171) {
        startDeg = 60;
        //gemini May 21
     }
    else if (totaldays >= 171 && totaldays < 201) {
        startDeg = 90;
     }
    else if (totaldays >= 201 && totaldays < 231) {
        startDeg = 120;
     }
    else if (totaldays >= 231 && totaldays < 261) {
        startDeg = 150;
     }
    else if (totaldays >= 261 && totaldays < 291) {
        startDeg = 180;
     }
    else if (totaldays >= 291 && totaldays < 321) {
        startDeg = 210;
     }
    else if (totaldays >= 321 && totaldays < 351) {
        startDeg = 240;
     }
    else if (totaldays >= 351 && totaldays < 21){
        startDeg = 270;
     }
 var endDeg = (startDeg + hourDeg) - 30;

     var zodtick = "rotate(" + endDeg + "deg)";
      
      $("#zod").css({ "transform" : zodtick });
 }

diff --git a/style.css b/style.css
 #clock {
    position: relative;
    width: 600px;
    height: 600px;
    margin: 0px auto 0 auto;
    background: url(http://imageshack.com/a/img841/4461/c6am.png);
    background-repeat: no-repeat;
    list-style: none;
 }

 #out {
    position: absolute;
    width: 640px;
    height: 640px;
    top: -19px;
    left: -22px;
    background: url(http://imageshack.com/a/img842/9079/y0kw.png);
    background-repeat: no-repeat;
    z-index: 1;
 }

 #zod {
    position: absolute;
    width: 600px;
    height: 600px;
    top: 40px;
    left: -10px;
    background: url(http://imageshack.com/a/img834/8898/47ej.png);
    background-repeat: no-repeat;
    z-index: 2;
 }

 #sec, #min, #hour {
    position: absolute;
    height: 600px;
    top: 0px;
    left: 289px;
    background-repeat: no-repeat;
 }

 #sec {
  width: 20px;
  background: url(http://imageshack.com/a/img842/8844/wq6j.png);
  z-index: 5;
 }
   
 #min {
  width: 20px;
  background: url(http://imageshack.com/a/img841/6458/4bwa.png);
  z-index: 4;
 }
   
 #hour {
  top: 5px;
  width: 60px;
  left: 270px;
  background: url(http://imageshack.com/a/img836/866/87nn.png);
  z-index: 3;
 }
	<head>
	<title></title>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">

	</head>
	<body>

	<ul id="clock">
	<li id="out"></li>
	<li id="zod"></li>
	<li id="sec"></li>
	<li id="hour"></li>
	<li id="min"></li>
	</ul>

	<!--<footer>Golden Hand image on hour hand -http://commons.wikimedia.org/wiki/File:Guante_Lambayeque.JPG Fotógrafo: © Manuel González Olaechea y Franco, -http://creativecommons.org/licenses/by/3.0/deed.en;
	Sun image on hour hand- http://apod.nasa.gov/apod/ap100923.html</footer>-->
	<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
	</body>
	var hours;
	var hourDeg;
	var totaldays;
	var sunDeg;
	var months;
	var days;
	var startDeg;
	var seconds;
	var mins;

	//pulls the time locally and sets the images in motion

	$(function() {

	setInterval( function() {
	seconds = new Date().getSeconds();
	var sectick = "rotate(" + seconds * 6 + "deg)";
	$("#sec").css({ "transform": sectick });

	}, 1000 );

	setInterval( function() {
	hours = new Date().getHours();
	astroHours();
	var hourtick = "rotate(" + hourDeg + "deg)";
	$("#hour").css({ "transform": hourtick});

	}, 1000 );

	setInterval( function() {
	mins = new Date().getMinutes();
	var mintick = "rotate(" + mins * 6 + "deg)";

	$("#min").css({ "transform" : mintick });

	}, 1000 );

	setInterval( function() {
	var month = new Date().getMonth();
	months = month + 1;
	days = new Date().getDate();
	sunset();
	zodiac();
	var daytick = "rotate(" + sunDeg + "deg)";

	$("#out").css({ "transform" : daytick });

	}, 1000 );
	});


	// calculates the hour of day on the astronomical clock, noon is at 0 degrees
	function astroHours(){

	if (0 < hours < 12){
	hourDeg = 180 + 15*hours;
	}
	else if (12 < hours <=24){
	hourDeg = 15*hours;
	}
	}

	//calculates degrees for outer ring estimating old Czech time
	function sunset(){

	totaldays = months * 30.5 + days;
	if (totaldays > 349 && totaldays <= 365) {
	sunDeg = 60 + ((totaldays - 349)*.42);
	}
	else if (totaldays >= 0 && totaldays < 206){
	sunDeg = 60 + (totaldays *.42);
	}
	else if (totaldays >= 206 && totaldays <= 349) {
	sunDeg = 139 - (totaldays *.42);
	}
	}

	//moves the zodiac dial
	function zodiac(){
	if (totaldays >= 21 && totaldays < 51) {
	startDeg = 300;
	//aquarius Jan 21
	}
	else if (totaldays >= 51 && totaldays < 81) {
	startDeg = 330;
	//pisces Feb 21
	}
	else if (totaldays >= 81 && totaldays < 111) {
	startDeg = 0;
	//ares March 21
	}
	else if (totaldays >= 111 && totaldays < 141) {
	startDeg = 30;
	//taurus April 20
	}
	else if (totaldays >= 141 && totaldays < 171) {
	startDeg = 60;
	//gemini May 21
	}
	else if (totaldays >= 171 && totaldays < 201) {
	startDeg = 90;
	}
	else if (totaldays >= 201 && totaldays < 231) {
	startDeg = 120;
	}
	else if (totaldays >= 231 && totaldays < 261) {
	startDeg = 150;
	}
	else if (totaldays >= 261 && totaldays < 291) {
	startDeg = 180;
	}
	else if (totaldays >= 291 && totaldays < 321) {
	startDeg = 210;
	}
	else if (totaldays >= 321 && totaldays < 351) {
	startDeg = 240;
	}
	else if (totaldays >= 351 && totaldays < 21){
	startDeg = 270;
	}
	var endDeg = (startDeg + hourDeg) - 30;

	var zodtick = "rotate(" + endDeg + "deg)";

	$("#zod").css({ "transform" : zodtick });
	}
	#clock {
	position: relative;
	width: 600px;
	height: 600px;
	margin: 0px auto 0 auto;
	background: url(http://imageshack.com/a/img841/4461/c6am.png);
	background-repeat: no-repeat;
	list-style: none;
	}

	#out {
	position: absolute;
	width: 640px;
	height: 640px;
	top: -19px;
	left: -22px;
	background: url(http://imageshack.com/a/img842/9079/y0kw.png);
	background-repeat: no-repeat;
	z-index: 1;
	}

	#zod {
	position: absolute;
	width: 600px;
	height: 600px;
	top: 40px;
	left: -10px;
	background: url(http://imageshack.com/a/img834/8898/47ej.png);
	background-repeat: no-repeat;
	z-index: 2;
	}

	#sec, #min, #hour {
	position: absolute;
	height: 600px;
	top: 0px;
	left: 289px;
	background-repeat: no-repeat;
	}

	#sec {
	width: 20px;
	background: url(http://imageshack.com/a/img842/8844/wq6j.png);
	z-index: 5;
	}

	#min {
	width: 20px;
	background: url(http://imageshack.com/a/img841/6458/4bwa.png);
	z-index: 4;
	}

	#hour {
	top: 5px;
	width: 60px;
	left: 270px;
	background: url(http://imageshack.com/a/img836/866/87nn.png);
	z-index: 3;
	}