/*globals $, $$, $$$, Cookie, doFadeIn, doAnimation */
var ImportantMessage = function() {
	var msg =
"<b>Welcome to the MixMaker!</b><br /><br />"+
'<div class="chunk">With this tool, you can SEE the audio that you hear. Think of this as a text editor for audio. What we want is for you to cut, copy, paste, and rearrange the squiggly lines to visually map out the audio so that it sounds just as you like. This is called remixing!</div>'+
'<div class="chunk">'+
	'<img class="column wide" src="/images/seq/icons/waveform.png" alt="waveform" title="waveform: visual representation of audio" />'+
	'these squiggly lines are the visual representation of the audio you hear.</div>'+
'<div class="chunk">'+
	'<img class="column" src="/images/seq/icons/playbutton.png" alt="play" title="play button" />'+
	'<b>play</b> the audio. Listen as the playhead <img id="playhead" src="/images/seq/icons/play-head.png" alt="|" title="the playhead is a vertical bar" /> moves horizontally across the screen.</div>'+
'<div class="chunk">'+
	'<img class="column" src="/images/seq/icons/hand.png" alt="move" title="move tool" />'+
	'<b>move</b> bits of audio horizontally and arrange them as you like</div>'+
'<div class="chunk">'+
	'<img class="column" src="/images/seq/icons/duplicate.png" alt="duplicate" title="duplicate button" />'+
	'<b>duplicate</b> selected bits of audio</div>'+
'<div class="chunk">'+
	'<img class="column" src="/images/seq/icons/cut.png" alt="cut" title="cut tool" />'+
	'<b>cut</b> bits of audio and use the parts you like</div>'+
'<div class="chunk">'+
	'<img class="column" src="/images/seq/icons/zoom.png" alt="zoom" title="zoom tool" />'+
	'<b>zoom</b> in for precise editing</div>'+
'<div class="chunk">'+
	'<img class="column" src="/images/seq/icons/area-select.png" alt="select" title="area select tool" />'+
	'<b>cut</b>, <b>copy</b>, <b>paste</b>, and <b>delete</b> audio you\'ve selected with this tool</div>'+
'<div class="chunk">'+
	'<img class="column" src="/images/seq/icons/undo.png" alt="undo" title="undo button" />'+
	'<b>undo</b> any of your mistakes</div>';

	function setup() {
		if (!Cookie.readCookie('dontShowSeqMsg')) {
			var holderBox = $$($$$("flashHolder").parentNode),
				oldholder = $$$('impMsgHolder'),
				holder = oldholder ? oldholder.empty().show() : document.create('div', 'impMsgHolder'),
				impMsg = holder.create('div', 'impMsg'),
				closeLink = impMsg.create('div', 'impMsgClose').update('close'),
				dontShowAgain = impMsg.create('input:checkbox', 'impMsgDontShow'),
				msgP = impMsg.create('div', null, 'msg').update(msg);
			dontShowAgain.setAttribute("name", dontShowAgain.id);
			closeLink.onclick = function () {
					holder.hide();
					if (dontShowAgain.checked) { Cookie.createCookie('dontShowSeqMsg', 1); }
				};
			dontShowAgain.insertAfter(document.create('label:impMsgDontShow').update("Don't show me this message again."));
//			holder.style.top = '-1000px';
			holder.style.opacity = 0;
			holder.style.filter = "alpha(opacity=0)";
			holder.style.zIndex = 1000;
			holderBox.appendChild(holder);
//			doAnimation(holder);
			window.setTimeout(doFadeIn.curry(holder), 1000);
			}
		}

		function doAnimation(holder) {
			var height = holder.clientHeight,
				interval = window.setInterval(function() {
					height -= 15;
					if (height > 0) {
						holder.style.top = '-' + height + 'px';
					} else {
						holder.style.top = 0;
						window.clearInterval(interval);
					}
				}, 50);
			holder.style.top = '-' + height + 'px';
		}
		function doFadeIn(holder) {
			var opac = 0, mult = 2,
				interval = window.setInterval(function() {
					if (!holder.hidden() && opac < 1) {
						opac += mult * 1e-2;
						mult *= 1.5;
						holder.style.opacity = opac;
						holder.style.filter = "alpha(opacity="+(100*opac);
					} else {
						holder.style.opacity = 1;
						holder.style.filter = "alpha(opacity=100)";
						window.clearInterval(interval);
					}
				}, 50);
		}

	window.addLoad(setup);
	return { refresh: setup };
}();