if (typeof(FOH) == "undefined") FOH = {};





FOH.SwapItem = Class.create({

	initVariables: function() {
		this.triggers = [];
		this.title = null;
		this.video = {
			url: null,
			poster: null,
			end: null
		};
		this.gallery = null;
		
		this.docTitle = document.title;
	},

	initialize: function(section) {
		this.initVariables();

		section = $(section);
		this.triggers = [section];
		this.title = section.down('a').innerHTML.stripTags().strip();

		// category
		this.category = '';
		if (section.up('.category').down('h4')) {
			if (section.up('.category').down('h4')) this.category += section.up('.category').down('h4').innerHTML.stripTags().strip()+' - ';
		} else if (section.up('.category').previous('h4')) {
			this.category += section.up('.category').previous('h4').innerHTML.stripTags().strip()+' - ';
			if (section.up('.category').down('h5')) this.category += section.up('.category').down('h5').innerHTML.stripTags().strip()+' - ';
		}

		this.id = section.identify();

		var link = section.down('a') || section;
		if (link.href.match(/\.mov/)) {
			this.video = {
				url: section.down('a').href,
				end: (section.down('.endstate')) ? section.down('.endstate').innerHTML : ''
			}
		}

		if (section.down('.gallery')) {
			this.gallery = section.down('.gallery').innerHTML.strip();
		}

		if (section.up('div.tabswap')) {
			this.tab = section.up('div.tabswap');
		}

		link.href = '#';
		if (this.tab) link.href += 'tab='+this.tab.identify()+'&';
		link.href += 'tutorial='+this.id+'&';
		link.href = link.href.substring(0, link.href.length-1)
		
		this.setHover(0);
		this.setClick(0);
	},
	
	setHover: function(i) {
		var trigger = this.triggers[i];

		Event.observe(trigger, 'mouseover', function() {
			trigger.addClassName('hover');
		}, false);

		Event.observe(trigger, 'mouseout', function() {
			trigger.removeClassName('hover');
		}, false);
	},
	
	setClick: function(i) {
		var trigger = this.triggers[i];

		Event.observe(trigger, 'click', function(evt) {
			if (!AC.Detector.isOpera()) {
				if (evt) {
					var target = evt.findElement('a[href]');
					if (target && !target.href.match('#')) Event.stop(evt);
				}

 				this.dispatchEvent('activate', this);
			}
		}.bind(this), false)
	},

	addTrigger: function(trigger) {
		this.triggers.push(trigger);

		this.setHover(this.triggers.length-1);
		this.setClick(this.triggers.length-1);
	},

	activate: function(tracking) {
		document.title = this.docTitle+' - '+this.category+this.title;
		this.trackClick(tracking);

		this.visited();
		
		this.triggers.each(function(trigger) {
			trigger.addClassName('active');
		});
	},
	
	deactivate: function() {
		this.triggers.each(function(trigger) {
			trigger.removeClassName('active');
		})
	},

	visited: function() {
		this.triggers.each(function(trigger) {
			if (!trigger.hasClassName('visited')) trigger.addClassName('visited');
		});
	},

	trackClick: function(custom) {
		var options = {};
		var url = document.location.toString().replace(/#.*/, '');
		
		// prop4 = url
		if (custom.toString().match(/gallery/i)) {
			options.prop4 = url + '#tutorial='+this.id+'&gallery';
		} else if (this.video.url) {
			options.prop4 = this.video.url;
		} else if (this.gallery && this.id) {
			options.prop4 = url + '#tutorial='+this.id;
		}
		
		if (this.tab) {
			var directory = document.location.toString();
			directory = directory.replace(/http:\/\/[^\/]*\//, '');
			directory = directory.replace(/\/.*/, '');

			var tab = this.tab.identify().toLowerCase().strip();

			options.prop2 = 'www.us.'+directory+'.'+tab;
		}

		// prop6, prop13 = link type + state
		var string = '';
		if (typeof(custom) != 'boolean') {
			string += custom+': ';
		} else if (this.video.url) {
			string += 'V@S: ';
		} else if (this.gallery) {
			string += 'Text: ';
		}
		string += document.title;
		string += ' (US)';

		options.pageName = string;
		options.prop6 = string;
		options.prop13 = string.replace('Apple - ', '');

		AC.Tracking.trackPage(options);
	}

});
Object.extend(FOH.SwapItem.prototype, Event.Publisher);





FOH.Swap = Class.create();
Object.extend(FOH.Swap.prototype, Event.Listener);
Object.extend(FOH.Swap.prototype, {

	initVariables: function() {
		this.sections = {};
		this.initialized = false;
		this.currentSection = null;
		this.currentController = null;
		this.panels = {
			wrapper: null,
			movie: null,
			controller: null,
			end: null,
			html: null
		};

		this.cookies = new FOH.Cookies();
	},

	initialize: function(sections, extraSectionTriggers, tabs, panels) {
		this.initVariables();

		var extraSectionTriggers = this.setExtraTriggersInfo(extraSectionTriggers);
		this.setSections(sections, extraSectionTriggers);

		this.tabs = tabs;
		for (panel in panels) this.panels[panel] = $(panels[panel]);

		this.panels.video.gallery.back.observe('click', this.showCurrent.bind(this));
		this.panels.video.gallery.trigger.observe('click', this.showCurrentGallery.bind(this));

		this.panels.video.end.replay.observe('click', this.replayCurrent.bind(this));

		// for IE
		Event.observe(window, 'unload', function() {
			this.currentController = null;
			this.currentMovie = null;
		}.bind(this));
	}, 
	
	setExtraTriggersInfo: function(triggers) {
		triggers.each(function(trigger, i) {
			var id = trigger.down('a') || trigger;
			id = id.href.replace(/.*#/, '');
			id = id.toQueryParams();
			id = id.tutorial;

			triggers[i].writeAttribute({ 'compareId':id });
		});

		return triggers;
	}, 
	
	setSections: function(sections, extraSectionTriggers) {
		for (var i=0; i<sections.length; i++) {
			var section = new FOH.SwapItem(sections[i]);
			if (this.cookies.data.indexOf(section.id)>-1) section.visited();

			for (var j=0; j<extraSectionTriggers.length; j++) {
				if (section.id == extraSectionTriggers[j].readAttribute('compareId')) {
					if (j==0) this.firstSection = section;
					section.addTrigger(extraSectionTriggers[j]);
				}
			}

			this.setListener(section);
			this.sections[section.id] = section;
		}

		this.lastSection = this.firstSection;
		this.currentSection = this.firstSection;
	}, 
	
	setListener: function(section) {
		this.listenForEvent(section, 'activate', false, function(evt) {
			var section = evt.event_data.data;
			this.show(section, false);
		});
	},

	showVideo: function(section, checkUrl) {
		this.panels.wrapper.className = 'movie';
		
		if (this.currentController && !this.currentController.movie) this.onMovieShow = setTimeout(this.showVideo.bind(this, section), 100);
		if (this.currentController && this.currentController.movie) {
			if (this.currentUrl != section.video.url) {
				this.currentController.SetURL(section.video.url);
				this.currentUrl = section.video.url;
			}
			
			if (!this.currentController.isPlaying()) {
				this.currentController.Play();
				if (!this.onMovieShow) this.onMovieShow = setTimeout(this.showVideo.bind(this, section), 100);
			}

			var onMovieFinished = function(section) {
				this.currentController.options.onMovieFinished = this.showEndFrame.bind(this, section);
			}.bind(this, section)
			this.onMovieFinished = setTimeout(onMovieFinished, 1000);
		}

		this.showVideoGalleryLink(section);
	},

	showVideoGalleryLink: function(section) {
		if (section.gallery) {
			this.panels.video.gallery.back.href = '#tutorial='+section.id;

			this.panels.video.gallery.trigger.href = '#tutorial='+section.id+'&gallery';
			this.panels.video.gallery.trigger.style.display = 'block';
		}
	},

	showGallery: function(section) {
		if (section.gallery) {
			this.panels.wrapper.className = 'gallery';

			this.hideVideo(true);
			this.hideGallery();
			this.hideText();

			this.panels.video.gallery.display.insert(section.gallery);
			new FOH.Gallery(this.panels.video.gallery.display);
		}
	},

	showCurrentGallery: function() {
		this.showGallery(this.currentSection);

		this.currentSection.trackClick('Gallery');
	},

	showEndFrame: function(section) {
		this.panels.wrapper.className = 'endstate';
		this.panels.video.end.display.insert(section.video.end);

		this.trackEndFrame(section);
	},

	trackEndFrame: function(section) {
		var options = {};

		var string = 'V@E: ';
		string += document.title;
		string += ' (US)';

		AC.Tracking.trackClick({ prop13:string }, this, 'o', string);
	},

	showText: function(section) {
		this.panels.wrapper.className = 'tips';

		this.panels.text.update(section.gallery);
		new FOH.Gallery(this.panels.text);
	},

	showCurrent: function() {
		this.show(this.currentSection, true);
	},

	showById: function(sectionId, gallery) {
		var section = this.sections[sectionId];

		if (section) {
			if (gallery && section.gallery) {
				this.show(this.sections[sectionId], 'Gallery');
			} else {
				this.show(this.sections[sectionId], false);
			}
		} else {
			this.showFirst();
		}
	},

	showLast: function() {
		if (this.lastSection) {
			this.show(this.lastSection, true);
		} else {
			this.showCurrent();
		}
	},

	showFirst: function() {
		this.showVideoGalleryLink(this.firstSection);
		
		if (this.tabs && this.firstSection.tab) this.tabs.showContent(this.firstSection.tab);

		// fake a controller here...
		var fakeController = new AC.QuicktimeController();
		fakeController.render(this.panels.video.controller);
		fakeController = null; // for IE

		this.panels.video.controller.down('.control').observe('click', this.show.bind(this, this.firstSection, false));
	},

	show: function(section, force) {
		if (!this.initialized || force || this.currentSection != section) {
			
			if ((!this.initialized || !force) && this.currentSection) this.hide(this.currentSection);

			section.activate(force);
			this.cookies.set(section.id);

			if (this.tabs && section.tab) this.tabs.showContent(section.tab);

			if (force == 'Gallery') {
				this.showVideoGalleryLink(section);
				this.showGallery(section);
			} else if (section.video.url != null) {
				if (!this.currentController) this.setUpMovieAndController(section);
				this.showVideo(section, section.video.url);
			} else if (section.gallery != null) {
				this.showText(section);
			}
			
			if (!this.initialized) this.initialized = true;
		}
		
		this.currentSection = section;
		if (section.video.url || section.gallery) this.lastSection = section;
	},
	
	replayCurrent: function() {
		this.show(this.currentSection, 'V@R');
	},

	hide: function(section) {
		section.deactivate();
		
		this.hideVideo();
		this.hideGallery();
		this.hideText();
	},

	hideVideo: function(keepUrl) {
		if (this.onMovieFinished) this.onMovieFinished.clearTimeout;
		if (this.onMovieShow) this.onMovieShow.clearTimeout;

		if (this.currentController) {
			this.currentController.options.onMovieFinished = null;
			this.currentController.Stop();
			// TODO: this....
			// if (!keepUrl && this.currentController.movie) {
			// 	this.currentController.SetURL('http://images.apple.com/global/elements/blank.gif');
			// 	this.currentUrl = 'http://images.apple.com/global/elements/blank.gif';
			// }
		}

		this.panels.video.end.display.update('');
	},

	hideGallery: function() {
		this.panels.video.gallery.display.update('');
		this.panels.video.gallery.trigger.style.display = '';
	},
	
	hideText: function() {
		this.panels.text.update('');
	},

	setUpMovieAndController: function(section) {
		var movie = AC.Quicktime.packageMovie('frpm-object', section.video.url, {
			width: 640,
			height: 400,
			autoplay: true,
			controller: false,
			cache: true,
			showlogo: false
		});
		this.panels.video.display.appendChild(movie);
		
		if (AC.Detector.isValidQTAvailable('7')) {
			this.currentController = new AC.QuicktimeController();
			this.currentController.attachToMovie(movie, { 
				onMoviePlayable: this.currentController.monitorMovie.bind(this.currentController)
			});
			this.panels.video.controller.update('');
			this.currentController.render(this.panels.video.controller);
		}
		
		movie = null; // for IE
	}

});