var intro = {
	canvas: null,
	canvasGlows: null,
	flare: null,
	playbutton: null,
	transitionDuration: 5,
	betweenTransitions: 8,
	fps: 20,
	paused: false,
	transitionTimeout: null,

	setup: function() {
		this.canvas = $('intro');
		this.nav.setup();

		// Add glows to canvas
		for(var i=0;i<4;i++) {
			this.canvas.insert({
				bottom: new Element('div', {id: 'glow'+i, 'class': 'undereffects underglow', style: 'top:'+randomPixel('y',{offset:699/2})+'px;left:'+randomPixel('x',{offset:699/2})+'px;'})
			});
		}
		// Add flare to canvas
		this.canvas.insert({
				bottom: new Element('img', {src: 'images/template/intro/effects/flare.png', id: 'flare', 'class': 'undereffects', style: 'opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);top:'+randomPixel('y',{offset:463/2})+'px;left:'+randomPixel('x',{offset:465/2})+'px;'})
		});
		this.flare = $('flare');

		// Add playbutton to canvas
		this.canvas.insert({
				bottom: new Element('a', {href: '#', id: 'playbutton', style: 'display:none;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);', onclick: 'intro.resume();return false;', onmouseover: "this.down('#playbuttonnormal').morph('opacity:0',{position:'parallel'});this.down('#playbuttonhover').morph('opacity:1',{position:'parallel'})", onmouseout: "this.down('#playbuttonnormal').morph('opacity:1',{position:'parallel'});this.down('#playbuttonhover').morph('opacity:0',{position:'parallel'})"})
		});
		this.playbutton = $('playbutton');
		this.playbutton.insert({
				bottom: new Element('img', {src: 'images/template/intro/playbutton.png', id: 'playbuttonnormal'})
		});
		this.playbutton.insert({
				bottom: new Element('img', {src: 'images/template/intro/playbuttonhover.png', id: 'playbuttonhover', style: 'opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);'})
		});

		// Add transition header and text to canvas
		$w("cross_media_marketing dynamic_personalization print_supply_chain_management data creative print mail web").each(function(el){
			intro.canvas.insert({
				bottom: new Element('img', {src: 'images/template/intro/slides/'+el+'-transition_header.png', id: el+'-transition_header', 'class': 'transition transition_header', style: 'left:'+randomPixel('x',{offset:200})+'px;top:'+randomPixel('y',{offset:200,bounds:400})+'px;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);'})
			})
			intro.canvas.insert({
				bottom: new Element('img', {src: 'images/template/intro/slides/'+el+'-transition_text.png', id: el+'-transition_text', 'class': 'transition transition_text', style: 'left:'+randomPixel('x',{offset:200})+'px;top:'+randomPixel('y',{offset:-400,bounds:200})+'px;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);'})
			})
			intro.canvas.select('#slide-'+el+' img').each(function(img, index) {
				intro.canvas.insert({
					bottom: new Element('img', {src: 'images/template/intro/slides/'+el+'-transition_image'+(index+1)+'.png', id: img.id+'-transition_image', 'class': 'transition '+el+'-transition_image', style: 'left'+randomPixel('x',{offset:200})+'px;top:'+randomPixel('y',{offset:-400,bounds:200})+'px;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);'})
				})
			});
		});

		// Add transition images to canvas

		this.canvasGlows = this.canvas.select('.underglow');

		// Start the slideshow
		this.transitionTo('intronav-cross_media_marketing');
	},

	transitionTo: function(itemId, pause, fromClick) {
		if(intro.nav.current_item == itemId)
			return;

		clearTimeout(intro.transitionTimeout);
		navItem = $(itemId).down('a');
		intro.canvasGlows.each(function(el) { appearAndShuffle(el); });
		appearAndShuffle(intro.flare, {'transition': 'easeTo', duration: intro.transitionDuration/2});
		rotateAndScale(intro.flare, { 'rotation': Math.random()*360, 'scale': (Math.random()+0.1)*2 });
		intro.nav.setCurrent(navItem,fromClick);

		// Fade out current slide
		intro.canvas.select('.slide.current').each(function(slide){
			slide.removeClassName('current');
      slide.select('h2,p,ul,img,a').each(function(el) {
        el.fadeQueue = el.fadeQueue||new S2.FX.Queue;
        // Clear any fades already queued
        el.fadeQueue.getEffects().each(function(effect){
          el.fadeQueue.remove(effect);
        });
        el.fade({queue: el.fadeQueue, position: 'parallel', duration: intro.transitionDuration/5, transition: 'easeOutQuint'})
      });
		});

		// Transition out old slide header
		intro.canvas.select('.transition_header.transition_current').each(function(el){
			el.morph('left:'+randomPixel('x',{offset:200})+';top:'+randomPixel('y',{offset:200,bounds:400})+'px;opacity:0', {
				position: 'parallel',
				duration: intro.transitionDuration/2,
				propertyTransitions: {
					left: 'easeFromTo',
					top: 'easeFromTo',
					opacity: 'easeTo'
				}
			});
			rotateAndScale(el,{scale:3,duration:intro.transitionDuration/4,transition:'mirror',transitionTransition:'easeTo'});
			el.removeClassName('transition_current');
		});
		// Transition out old slide text
		intro.canvas.select('.transition_text.transition_current').each(function(el){
			el.morph('left:'+randomPixel('x',{offset:200})+'px;top:'+randomPixel('y',{offset:-400,bounds:200})+'px;opacity:0', {
				position: 'parallel',
				duration: intro.transitionDuration/2,
				propertyTransitions: {
					left: 'easeFromTo',
					bottom: 'easeFromTo',
					opacity: 'easeTo'
				}
			});
			rotateAndScale(el,{scale:3,duration:intro.transitionDuration/4,transition:'mirror',transitionTransition:'easeOutQuint'});
			el.removeClassName('transition_current');
		});
		// Transition out old slide images
		intro.canvas.select('img.transition_current').each(function(el){
			el.morph('left:'+randomPixel('x',{offset:200})+'px;top:'+randomPixel('y',{offset:-400,bounds:200})+'px;opacity:0', {
				position: 'parallel',
				duration: intro.transitionDuration/2,
				propertyTransitions: {
					left: 'easeFromTo',
					bottom: 'easeFromTo',
					opacity: 'easeTo'
				}
			});
			rotateAndScale(el,{scale:3,duration:intro.transitionDuration/4,transition:'mirror',transitionTransition:'easeOutQuint'});
			el.removeClassName('transition_current');
		});

		// Fade in new slide
		slide = $(itemId.replace('intronav','slide'));
		slide.addClassName('current');
    slide.select('h2,p,ul,img,a').each(function(el){el.hide();});
    slide.show();
    // Change images to IE images if IE
    if(navigator.appName == 'Microsoft Internet Explorer') {
      slide.select('img').each(function(img) {
        new_source = img.src.sub(/\.png$/,'-ie.png');
        img.src = new_source
      });
    }
    slide.select('h2,p,ul,img,a').each(function(el) {
      el.fadeQueue = el.fadeQueue||new S2.FX.Queue;
      // Clear any fades already queued
      el.fadeQueue.getEffects().each(function(effect){
        el.fadeQueue.remove(effect);
      });
      el.appear({queue:el.fadeQueue, position: 'parallel', duration: intro.transitionDuration/1.5, transition: 'easeFrom', after: function() {
        // Change IE images back to normal
        if(navigator.appName == 'Microsoft Internet Explorer') {
          slide.select('img').each(function(img) {
            new_source = img.src.sub(/-ie\.png$/,'.png');
            img.src = new_source
          });
        }
      }});
    });

		// Transition in new slide header
		transition_header = intro.canvas.down('#'+itemId.replace('intronav-','')+'-transition_header');
		transition_header.addClassName('transition_current');
		rotateAndScale(transition_header,{scale:2,duration:intro.transitionDuration/3,transition:'mirror',transitionTransition:'easeTo'});
    // Firefox won't let you get the style of hidden elements, so we have to show it real quick, get the style, and hide it again.
    h2 = slide.down('h2');
    h2.show();
    leftStyle = h2.getStyle('left');
    topStyle = h2.getStyle('top');
    h2.hide();
		transition_header.morph('left:'+leftStyle+';top:'+topStyle+';opacity:1', {
				position: 'parallel',
				duration: intro.transitionDuration/2,
				propertyTransitions: {
					left: 'easeOutCirc',
					top: 'easeOutCirc',
					opacity: 'easeFromTo'
				}
		});

		// Transition in new slide text
		transition_text = intro.canvas.down('#'+itemId.replace('intronav-','')+'-transition_text');
		transition_text.addClassName('transition_current');
		rotateAndScale(transition_text,{scale:1.5,duration:intro.transitionDuration/3,transition:'mirror',transitionTransition:'easeOutQuint'});
    // Firefox won't let you get the style of hidden elements, so we have to show it real quick, get the style, and hide it again.
    slideText = slide.down('.slide-text');
    slideText.show();
    leftStyle = slideText.getStyle('left');
    topStyle = slideText.getStyle('top');
    slideText.hide();
		transition_text.morph('left:'+leftStyle+';top:'+topStyle+';opacity:1', {
				position: 'parallel',
				duration: intro.transitionDuration/2,
				propertyTransitions: {
					left: 'easeOutCirc',
					top: 'easeOutCirc',
					opacity: 'easeFromTo'
				}
		});

		// Transition in new slide images
		intro.canvas.select('.'+itemId.replace('intronav-','')+'-transition_image').each(function(el,index) {
			el.addClassName('transition_current');
			rotateAndScale(el,{scale:1.5,duration:intro.transitionDuration/3,transition:'mirror',transitionTransition:'easeOutQuint'});
      // Firefox won't let you get the style of hidden elements, so we have to show it real quick, get the style, and hide it again.
      img = intro.canvas.down('#'+el.id.replace('-transition_image',''))
      img.show();
      leftStyle = img.getStyle('left');
      topStyle = img.getStyle('top');
      img.hide();
			el.morph('left:'+leftStyle+';top:'+topStyle+';opacity:1', {
					position: 'parallel',
					duration: intro.transitionDuration/2,
					propertyTransitions: {
						left: 'easeOutCirc',
						top: 'easeOutCirc',
						opacity: 'easeFromTo'
					}
			});
		});

		if(pause)
			intro.pause();
		else {
			intro.transitionTimeout = setTimeout(function() { intro.autoTransition() }, intro.betweenTransitions*1000);
		}
	},

	autoTransition: function() {
		if(!intro.paused) {
			itemId = intro.nav.nextItem(intro.nav.current_item);
			intro.transitionTo(itemId);
		}
	},

	pause: function() {
		if(!intro.paused) {
			intro.paused = true;
			intro.playbutton.show();
			rotateAndScale(intro.playbutton,{scale:1.2,duration:.2,transition:'mirror',transitionTransition:'spring'});
			intro.playbutton.morph('opacity:.75', { position: 'parallel', transition: 'bouncePast', duration:.2 });
		}
	},

	resume: function() {
		intro.paused = false;
		rotateAndScale(intro.playbutton,{scale:1.2,duration:.2,transition:'mirror',transitionTransition:'easeTo'});
		intro.playbutton.morph('opacity:0.01', {transition: 'easeTo', duration:.2, after: function(){intro.playbutton.hide();}});
		intro.autoTransition();
	},

	nav: {
		items: new Array(),
		nav_container: null,
		indicator: null,
		current_item: null,
		setup: function() {
			this.nav_container = $('intronav');	
			this.nav_container.select('li a').each(function(link, i) {
				intro.nav.items[i] = link.up('li').id;

				link.observe('mouseover', function() { 
					this.morph('opacity:0.99');
				});
				link.observe('mouseout', function() { 
					if(!this.hasClassName('current'))
						this.morph('opacity:0.5');
				});
				link.observe('click', function(event) {
					Event.stop(event);
					intro.transitionTo(this.up('li').id, true, true);
				});
			});
			// Add indicator to canvas
			intro.canvas.insert({
					bottom: new Element('div', {id: 'intronav-indicator', style: 'opacity:0.1'})
			});
			this.indicator = $('intronav-indicator');
		},
		setCurrent: function(navLink, fromClick) {
			itemId = navLink.up('li').id;
			newLocation = (90*intro.nav.itemNum(itemId))+4;
			navLink.up('ul').select('a.current').each(function(link) {
				link.morph('opacity:0.5', { after: function() { link.removeClassName('current') } });
			});
			if(fromClick)
				navLink.addClassName('current');
			navLink.morph('opacity:0.99', { after: function() { navLink.addClassName('current') } });
			intro.nav.current_item = itemId;
			intro.nav.indicator.morph('left:'+newLocation+'px;opacity:0', {
													position: 'parallel',
													before: function() {
														intro.nav.indicator.style.opacity = '1';
													},
													duration: .5,
													propertyTransitions: {
														left: 'easeOutSine',
														opacity: function(pos) {
															return S2.FX.Transitions.mirror(pos, S2.FX.Transitions.easeOutSine);
														}
													}
												});
		},
		itemNum: function(itemId) {
			return this.items.indexOf(itemId);
		},
		nextItem: function(itemId) {
			return this.items[(this.items.indexOf(itemId)+1)%this.items.length];
		}
	}
};

Array.prototype.random = function(){
  return this.sortBy(Math.random).first();
};

function appearAndShuffle(el, options) {
	transition = options && options['transition'] ? options['transition'] : 'easeOutBack';
	duration = options && options['duration'] ? options['duration'] : intro.transitionDuration;
	$(el).morph('opacity:1;top:'+randomPixel('y',{offset:el.getHeight()/2})+'px;left:'+randomPixel('x',{offset:el.getWidth()/2})+'px;', { 
		duration: duration,
		position: 'parallel',
		propertyTransitions: { opacity: 'linear', top: transition, left: transition}
	});
}
function randomPixel(axis, options) {
	bounds_default = (axis == 'x') ? intro.canvas.getWidth() : intro.canvas.getHeight();
	bounds = options && options['bounds'] ? options['bounds'] : bounds_default;
	offset = options && options['offset'] ? options['offset'] : 0;
	return Math.round(Math.random() * bounds) - offset;
}
var rotateAndScaleTimeout = new Array();
function rotateAndScale(el, options) {
	el.rotation = el.rotation||0;
	el.scale = el.scale||1;

	goal_rotation = options['rotation'] || el.rotation;
	goal_scale = options['scale'] || el.scale;

	processRotateAndScale(el,0,el.rotation,goal_rotation,el.scale,goal_scale,options);

	if(options['transition'] != 'mirror') {
		el.rotation = goal_rotation;
		el.scale = goal_scale;
	}
}
function processRotateAndScale(el,frame,start_rotation,goal_rotation,start_scale,goal_scale,options) {
	clearTimeout(rotateAndScaleTimeout[el.id]);

	duration = options && options['duration'] ? options['duration'] : intro.transitionDuration/2;
	transition = options && options['transition'] ? options['transition'] : 'easeTo';

	if(options && options['transitionTransition'])
		pct = S2.FX.Transitions[transition](frame/(intro.fps*duration),S2.FX.Transitions[options['transitionTransitions']]);
	else
		pct = S2.FX.Transitions[transition](frame/(intro.fps*duration));

	degrees = (start_rotation<goal_rotation) ? (pct*(goal_rotation-start_rotation))+start_rotation : start_rotation-(pct*(start_rotation-goal_rotation));
	degrees = degrees % 360;
	
	scale = (start_scale<goal_scale) ? (pct*(goal_scale-start_scale))+start_scale: start_scale-(pct*(start_scale-goal_scale));
	
	el.transform({rotation: degrees*(Math.PI/180), scale: scale, position: 'parallel'})

	if(frame < intro.fps * duration)
		rotateAndScaleTimeout[el.id] = setTimeout(function(){processRotateAndScale(el,frame+1,start_rotation,goal_rotation,start_scale,goal_scale,options);}, ((duration*1000)/(duration*intro.fps)));
}
Event.observe(window, 'load', function() { intro.setup(); });