var audioElement;
var audioElement2;
var interer;
var start = false;

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if(request.greeting == "start"){
			if(start == false){
				start = true;
		        //start
		        
		        var link = document.createElement("link");
				link.href = chrome.extension.getURL("animationlocomotive.css");
				link.type = "text/css";
				link.rel = "stylesheet";
				document.getElementsByTagName("head")[0].appendChild(link);
				
		        audioElement = document.createElement('audio');
				audioElement.setAttribute('src', chrome.extension.getURL("start.mp3"));
				audioElement.setAttribute('autoplay', 'autoplay');
				audioElement2 = document.createElement('audio');
				audioElement2.setAttribute('src', chrome.extension.getURL("sound.mp3"));
				audioElement2.setAttribute('autoplay', 'autoplay');
				audioElement2.setAttribute('loop', 'true');

				$('html').css({"-webkit-animation-duration": "3s"});
		        $('html').css({"-webkit-animation-name": "locomotivestart"});
		        $('html').css({"-webkit-animation-timing-function": "linear" });
		        $('html').css({"-webkit-animation-play-state": "running"});
		        $('html').css({"-webkit-animation-iteration-count": "1" });
		        
				audioElement.addEventListener("ended", function() {
					audioElement2.play();
				}, true);

				//normal
				var interval = 3;
				if(start == true){
					inter = setTimeout(function(){
						$('html').css({"-webkit-animation-duration": String(interval)+"s"});
						$('html').css({"-webkit-animation-name": "locomotiveanimation"});
						$('html').css({"-webkit-animation-timing-function": "linear" });
						$('html').css({"-webkit-animation-play-state": "running"});
				        $('html').css({"-webkit-animation-iteration-count": "infinite" });
						stuff();
					}, 2900);
				}
				function stuff(){
					if (interval > 0.31 && start == true){
						interval = interval - 0.3;
						$('html').css("-webkit-animation", "none").hide().show(0);
						//$('html').css({"-webkit-animation-play-state": "paused"});
						text = '-webkit-animation-duration: '+String(interval)+'s !important;';
						$('html').css({"-webkit-animation-duration": String(interval)+"s"});
						//$('html').css('cssText', text);
						$('html').css({"-webkit-animation-name": "locomotiveanimation"});
						$('html').css({"-webkit-animation-timing-function": "linear" });
						$('html').css({"-webkit-animation-play-state": "running"});
						$('html').css({"-webkit-animation-iteration-count": "infinite" });
						interer = setTimeout(stuff, interval*1000);
					} else {
					}
				}
			}
		}
		if(request.greeting == "stop"){
			start = false;
			clearTimeout(interer);
			$('html').css("-webkit-animation", "none");
			audioElement.src = "";
			audioElement2.src = "";
		}
	}
);