window.onload = function raphael() {
		var r = Raphael("paper", 310, 310);
		
		var sq = r.image("images/disk.png", 18, 33, 215, 215);
		
		
		
		var nd = r.image("images/needle.png", 240, -150, 52, 422); 
		
		//var play = r.image("images/play_1.png", 20, 268, 100, 40);
		//var stop = r.image("images/stop_1.png", 160, 268, 100, 40);
		var play_button = r.set();
		play_button.push(
			r.rect(27, 275, 102, 34, 12).attr({fill: '#000', opacity: 0.6}),
			r.rect(25, 273, 100, 32, 10).attr({'stroke-width': 2, stroke: "#ccc", fill: '#555', 'stroke-linejoin': "bevel"}),
			r.rect(27, 275, 96, 28, 8).attr({'stroke-width': 2, stroke: "#222", fill: "275-#fff-0", 'fill-opacity': 0.1}),
			r.text(74, 289, ":: PLAY ::").attr({'font-size': 18, 'font-weight': "bold", stroke: "#ccc", 'stroke-width': 1, 'stroke-opacity': 0.4})
		 );
		
		var stop_button = r.set();
		stop_button.push(
			r.rect(167, 275, 102, 34, 12).attr({fill: '#000', opacity: 0.6}),
			r.rect(166, 274, 100, 32, 10).attr({'stroke-width': 2, stroke: "#ccc", fill: '#555', 'stroke-linejoin': "bevel"}),
			r.rect(168, 276, 96, 28, 8).attr({'stroke-width': 2, stroke: "#222", fill: "275-#fff-0", 'fill-opacity': 0.1}),
			r.text(215, 290, ":: STOP  ::").attr({'font-size': 18, 'font-weight': "bold", stroke: "#ccc", 'stroke-width': 1, 'stroke-opacity': 0.4})
		);
		
		play_button[3].node.style.cursor = "pointer";
		play_button[2].node.style.cursor = "pointer";
		
		stop_button[3].node.style.cursor = "pointer";
		stop_button[2].node.style.cursor = "pointer";
		
		
		/*
		var previous = r.image("images/previous.png", 140, 268, 44, 44);
		var next = r.image("images/next.png", 200, 268, 44, 44);
		*/
		
		var play_on = r.circle(15, 278, 5).attr({stroke: "#ccc", fill: "#222", opacity: 1});	
		var stop_on = r.circle(155, 278, 5).attr({stroke: "#ccc", fill: "#222", opacity: 1});
		/*
		var previous_on = r.circle(135, 278, 5).attr({stroke: "#ccc", fill: "#222", opacity: 1});
		var next_on = r.circle(195, 278, 5).attr({stroke: "#ccc", fill: "#222", opacity: 1});
		*/
		var i = 0;
		var spinner_is_on = 0;
		var time = new Date();
			sec = time.getSeconds();
		var t;
		
		
		angle_2 = 90;
		function spinner() {
			sq.animate({rotation: angle_2}, 325, "");
			spinner_is_on = 1;
			angle_2 = angle_2 + 90;
			t = setTimeout(spinner, 325);
			}
		
		
		function play_button_on() {
			play_button[1].translate(2,1);
			play_button[2].translate(2,1);
			play_button[3].translate(2,1);
		}
		
		function play_button_off() {
			play_button[1].translate(-2,-1);
			play_button[2].translate(-2,-1);
			play_button[3].translate(-2,-1);
		}
		
		function stop_button_on() {
			stop_button[1].translate(2,1);
			stop_button[2].translate(2,1);
			stop_button[3].translate(2,1);
		}
		
		function stop_button_off() {
			stop_button[1].translate(-2,-1);
			stop_button[2].translate(-2,-1);
			stop_button[3].translate(-2,-1);
		}
		
	   
	   
	   
		play_button[0,1,2,3].click(function () {
			
			if (!spinner_is_on){
				spinner();
				play_button_on();
				stop_button_off();
			play_button[2].animate({"stroke": "green"}, 100);
		    nd.animate({rotation: 30}, 1000, ">");
		    play_on.animate({fill: "green"}, 300);
		    $('#jquery_jplayer').jPlayer("play");
		    $('#playlist').css('background-color', '#253377');
		    $('#display').css('background-color', '#253377');
		    $('#jplayer_playlist').animate({height: ['180px'], opacity: '1'},600,'linear');
		    $('#loaders').animate({width: ['310px'], opacity: '1'},600,'linear');
		     $('#instructions').hide();
		     $('#instructions_stop').show();
;			
		     $('#cover').animate({
				height: ['2'],
				opacity: '1'
			      }, 700, 'linear');
			$('#slider').animate({
				height: ['43'],
				opacity: '1'
			      }, 700, 'linear');
		    
		    
		    i = 1;
			}
			
			
			return false;
		
		
		}).mouseover(function () {
				play_on.animate({fill: "green"}, 300);
				
		}).mouseout(function () {
			if (i == 0) {
			
			play_on.animate({fill: "#222"}, 300);
			}
			else {
			play_on.animate({fill: "green"}, 300);
			}
		});
		 
		setTimeout(function () {r.safari();});
		
		
		
		stop_button[0,1,2,3].click(function () {
			if (spinner_is_on){
			play_button_off();
			stop_button_on();
			sq.stop(1000, "elastic");
			clearTimeout (t);
			nd.animate({rotation: 0}, 300, "elastic");
			play_on.animate({fill: "#222"}, 300);
			play_button[2].animate({"stroke": "#222"}, 100);
			$('#jquery_jplayer').jPlayer("pause");
			$('#playlist').css('background-color', '#222');
			$('#display').css('background-color', '#222');
			 $('#jplayer_playlist').animate({height: ['0px'], opacity: '0'},600,'linear');
			 $('#loaders').animate({width: ['0px'], opacity: '0.5'},600,'linear');
			 $('#instructions_stop').hide();
			 $('#instructions').show();
			 $('#cover').animate({
				height: ['45'],
				opacity: '1'
			      }, 700, 'linear');
			$('#slider').animate({
				height: ['0'],
				opacity: '1'
			      }, 700, 'linear');
			i = 0;
			spinner_is_on = 0;
			}
			else{}
                    
			return false;
		}).mouseover(function () {
			stop_on.animate({fill: "red"}, 300);
			
		}).mouseout(function () {
			stop_on.animate({fill: "#222"}, 300);
			
		});
		 
		setTimeout(function () {r.safari();});
		
		/*
		 function prev_needle() {
			if (i == 1) {
			nd.animate({rotation: 35}, 300, "elastic");
			
			}
			else{}
			return false;
			}
		
		
		previous.click(function () {
			prev_needle();
		}).mouseover(function () {
			previous_on.animate({fill: "white"}, 300);
		}).mouseout(function () {
			previous_on.animate({fill: "#222"}, 300);
		});
		 
		setTimeout(function () {r.safari();});
		
		
		next.click(function () {
			if (i == 1) {
			nd.animate({rotation: 40}, 300, "elastic");
			playListNext();
			
			
			}
			else {}
			return false;
		}).mouseover(function () {
			next_on.animate({fill: "white"}, 300);
		}).mouseout(function () {
			next_on.animate({fill: "#222"}, 300);
		});
		
		
		
	
		
	
		 
		setTimeout(function () {r.safari();});
		
		*/
		
		
	};