var Pages = [
	{	// 0
		bClass: 'body home',
		bId: 'body-h-0',
		brClass: 'browser home h-0',
		html: '<div class="outer">\
							<div class="wrapper">\
								<h1 id="ho-h1"><span>Smackerel abhors a vacuum;</span>\
									because design must be<br>\
									a social process.</h1>\
								<a href="#" title="our work is a collaboration with our clients" class="bodyLink" id="btn-1-right">our work is a collaboration with our clients\
									<img src="images/background_button_home_arrow_right.gif" alt="our work is a collaboration with our clients" width="21" height="34"></a>\
								<a href="blog/" title="We&rsquo;ve been doing this since multimedia was black and white." class="bodyLink" id="btn-blog">We&rsquo;ve been doing this since multimedia was black and white.\
									<img src="images/background_button_home_arrow_down.gif" alt="We&rsquo;ve been doing this since multimedia was black and white." width="31" height="19"></a>\
								<a href="#" title="But enough about us, let&rsquo;s talk about you." class="bodyLink" id="btn-9-left">But enough about us, let&rsquo;s talk about you.\
									<img src="images/background_button_home_arrow_left.gif" alt="But enough about us, let&rsquo;s talk about you." width="21" height="34"></a>\
							</div>\
							<!-- end wrapper -->\
						</div>'
	},
	{	// 1
		bClass: 'body ourWork',
		bId: 'body-ow-0',
		brClass: 'browser ourWork ow-0',
		html: '<div class="outer">\
					<div class="wrapper">\
						<h1 id="owS-h1">&ldquo;User Experience is crucial to the success of Rosetta Stone, and</h1>\
						<h2 id="owL-h2">Smackerel has been crucial to our User Experience.&rdquo;</h2>\
						<a href="http://secure.rosettastone.com/global/leadership/mike-fulkerson" title="Mike Fulkerson, CTO, Rosetta Stone" target="_blank" class="quote qmf">Mike Fulkerson, CTO, Rosetta Stone</a>\
						<div class="calluna">\
							<h3>We&rsquo;ve tried many approaches over the years, and we&rsquo;ve come to see design as a social process.</h3>\
							<p>Sure, we used to buy the myth of the lone genius designer, but with experience we realized that the best ideas arise out of conversation and collaboration. We&rsquo;re proud to say that all of the work represented here is the result of a deep collaboration with our clients.</p>\
						</div>\
						<!-- end calluna -->\
					</div>\
					<!-- end wrapper -->\
				</div>'
	},
	{	// 2
		bClass: 'body ourWork',
		bId: 'body-ow-1',
		brClass: 'browser ourWork ow-1',
		html: '<div class="outer">\
							<div class="wrapper">\
								<h1 id="ow-h1">&ldquo;Rosetta Stone is a work of art.</h1>\
								<h2 id="ow-h2">The interface is not only the most polished of all the language-learning<br>\
									programs I&rsquo;ve seen, it&rsquo;s also more graceful than a lot of other software, period.&rdquo;</h2>\
								<a href="http://www.pcmag.com/article2/0,2817,2381693,00.asp" title="From the March 9, 2011 PC Mag.com review of Rosetta Stone Version 4 TOTALe" target="_blank" class="quote">From the March 9, 2011 PC Mag.com review of Rosetta Stone Version 4 TOTALe</a>\
								<div class="clear">&nbsp;</div>\
								<ul class="projects floatLeft clearfloat">\
									<li class="v3">\
										<a href="images/placeholder_image_rs_lightbox-0.jpg" title="2007: Rosetta Stone Version 3" class="img" id="rsv3"><span>2007: Rosetta Stone Version 3</span></a>\
										<h3 style="display: none;">2007</h3>\
										<p style="display: none;">Rosetta Stone<br>\
											Version 3</p>\
									</li>\
									<!-- end v3 -->\
									<li class="v4">\
										<a href="images/placeholder_image_rs_lightbox-1.jpg" title="2010: Rosetta Stone V4 TOTALe" class="img" id="rsv4TotalE"><span>2010: Rosetta Stone<br>V4 TOTALe</span></a>\
										<h3 style="display: none;">2010</h3>\
										<p style="display: none;">Rosetta Stone<br>\
											V4 TOTALe</p>\
									</li>\
									<!-- end v4 -->\
									<li class="totale">\
										<a href="images/placeholder_image_rs_lightbox-2.jpg" title="2010: TOTALe Mobile Companion" class="img" id="rsv4TotalEMobile"><span>2010: TOTALe Mobile Companion</span></a>\
										<h3 style="display: none;">2010</h3>\
										<p style="display: none;">TOTALe<br>\
											Mobile Companion</p>\
									</li>\
									<!-- end totale -->\
									<li class="reflex">\
										<a href="images/placeholder_image_rs_lightbox-3.jpg" title="2011: Rosetta Stone ReFLEX" class="img" id="rsReflex"><span>2011: Rosetta Stone ReFLEX</span></a>\
										<h3 style="display: none;">2011</h3>\
										<p style="display: none;">Rosetta Stone<br>\
											ReFLEX</p>\
									</li>\
									<!-- end reflex -->\
								</ul>\
								<!-- end projects -->\
								<div class="calluna">\
									<p>Smackerel has been Rosetta Stone&rsquo;s UX consultant since 2006. These four product releases represent major milestones in our history together.</p>\
								</div>\
								<!-- end calluna -->\
							</div>\
							<!-- end wrapper -->\
						</div>'
	},
	{	// 3
		bClass: 'body ourWork',
		bId: 'body-ow-2',
		brClass: 'browser ourWork ow-2',
		html: '<div class="outer">\
					<div class="wrapper">\
						<h1 id="ow-h1">&ldquo;Psion learned quite a bit from our<br>\
							&nbsp;&nbsp;experience working with Smackerel,</h1>\
						<h2 id="ow-h2">and we have adopted many of the practices they showed us.&rdquo;</h2>\
						<a href="http://ca.linkedin.com/pub/nader-newman/9/9a7/b9" title="Nader Newman, Product Manager, Psion Inc." target="_blank" class="quote">Nader Newman, Product Manager, Psion Inc.</a>\
						<div class="calluna">\
							<p>Psion brought Smackerel on board to work with their internal product team to sketch out the user interface and flow for some new features of a future rugged mobile product.<br>\
								&nbsp;&nbsp;&nbsp;&nbsp;While we can&rsquo;t share the screens and storyboards for proprietary reasons, Psion team leader Nader Newman was happy to offer this testimonial:</p>\
						</div>\
						<!-- end calluna -->\
					</div>\
					<!-- end wrapper -->\
				</div>'
	},
	{	// 4
		bClass: 'body ourWork',
		bId: 'body-ow-3',
		brClass: 'browser ourWork ow-3',
		html: '<div class="outer">\
					<div class="wrapper">\
						<h1 id="ow-h1">&ldquo;Kevin and Dave helped us refine our<br>\
							&nbsp;&nbsp;user personas, establish a template...</h1>\
						<h2 id="ow-h2">and experience the benefits of low-cost usability testing.&rdquo;</h2>\
						<div class="serif">\
							<p>&ldquo;Psion had a novice approach to UX software development, and Smackerel was helpful in showing us the ropes. We were able to design a number of new features around a suite of sensors which were new to our mobile products.<br>\
								&nbsp;&nbsp;&nbsp;&nbsp;&ldquo;Kevin and Dave helped us refine our user personas, establish a template for basing requirements on user stories, and experience the benefits of low-cost usability testing. We had a number of great interactive sessions with our engineers which lead to numerous innovative ideas.<br>\
								&nbsp;&nbsp;&nbsp;&nbsp;&ldquo;Psion learned quite a bit from our experience working with Smackerel, and we have adopted many of the practices they showed us, such as quick internal usability tests when prototyping a new idea, the use of personas, and story-telling.&rdquo;</p>\
						</div>\
						<!-- end serif -->\
						<a href="http://ca.linkedin.com/pub/nader-newman/9/9a7/b9" title="Nader Newman, Product Manager, Psion Inc." target="_blank" class="quote">Nader Newman, Product Manager, Psion Inc.</a>\
					</div>\
					<!-- end wrapper -->\
				</div>'
	},
	{	// 5
		bClass: 'body ourWork',
		bId: 'body-ow-4',
		brClass: 'browser ourWork ow-4',
		html: '<div class="outer">\
					<div class="wrapper">\
						<h1 id="ow-h1">Leapfrog Schoolhouse</h1>\
						<div class="calluna">\
							<p>LeapFrog is that visionary maker of educational toys, based in San Francisco. A few years ago Smackerel was hired to re-imagine the teacher&rsquo;s experience of their LeapFrog Schoolhouse product. Kevin and Dave reduced the functionality to just a few screens, bringing actions and feedback &lsquo;inline&rsquo; on a unified teacher&rsquo;s dashboard. The results are pictured here.</p>\
						</div>\
						<!-- end calluna -->\
						<a href="#" title="Leapfrog Schoolhouse" class="img" id="leapfrog"><span>Leapfrog Schoolhouse</span></a>\
					</div>\
					<!-- end wrapper -->\
				</div>'
	},
	{	// 6
		bClass: 'body ourWork',
		bId: 'body-ow-5',
		brClass: 'browser ourWork ow-5',
		html: '<div class="outer">\
					<div class="wrapper">\
						<h1 id="ow-h1">Canwest Publishing</h1>\
						<div class="calluna">\
							<p>In 2008 Dave worked with Canwest Publishing on a major relaunch of their Canadian newspaper network. Our usability analysis turned up issues with the old layout and navigation; we knew we could boost audience with a user-centric redesign, employing quick design iterations, and frequent user testing.<br>\
							&nbsp;&nbsp;&nbsp;&nbsp;The newspaper chain relaunched in November 2008, quickly achieving a 50% increase in audience, and a 70% increase in advertising revenue.</p>\
						</div>\
						<!-- end calluna -->\
						<a href="#" title="Canwest Publishing" class="img" id="canwest"><span>Canwest Publishing</span></a>\
					</div>\
					<!-- end wrapper -->\
				</div>'
	},
	{	// 7
		bClass: 'body ourWork',
		bId: 'body-ow-6',
		brClass: 'browser ourWork ow-6',
		html: '<div class="outer">\
					<div class="wrapper">\
						<h1 id="ow-h1">Our Practices</h1>\
						<p id="owList-p"><span><strong>User experience architecture</strong><br>\
							&nbsp;&nbsp;&nbsp;User research, information architecture, interaction design,<br>\
							&nbsp;&nbsp;&nbsp;low-cost user testing.<br></span>\
							<span><strong>Creative</strong><br>\
							&nbsp;&nbsp;&nbsp;Creative direction, interface design, interaction prototypes,<br>\
							&nbsp;&nbsp;&nbsp;final production assets.<br></span>\
							<span><strong>Project management</strong><br>\
							&nbsp;&nbsp;&nbsp;Meshing our UX process into your internal agile development<br>\
							&nbsp;&nbsp;&nbsp;process.<br>\
							&nbsp;&nbsp;&nbsp;Sourcing and managing external development resources.</span></p>\
					</div>\
					<!-- end wrapper -->\
				</div>'
	},
	{	// 8
		bClass: 'body contactUs',
		bId: 'body-cu-0',
		brClass: 'browser contactUs cu-0',
		html: '<div class="outer">\
					<div class="wrapper">\
						<h1 id="cu-h1">About us</h1>\
						<p id="cu-p">We&rsquo;ve been creating digital products for a very long time. We started Canada&rsquo;s first interactive agency in 1989, before this industry had a common language, best practices, indeed before there was an industry. Everything was new, and scary. But the boldest clients were making history.<br>\
							&nbsp;&nbsp;&nbsp;&nbsp;After twenty years of intense change, one thing remains the same: we are still working with bold clients who are pushing boundaries and defining new categories.</p>\
						<div class="sidebar sbRight">\
							<h2>Contact Smackerel</h2>\
							<p>email: <a href="mailto:dave@smackerel.net" title="dave@smackerel.net">dave@smackerel.net</a><br>\
								<a href="mailto:kevin@smackerel.net" title="kevin@smackerel.net">kevin@smackerel.net</a></p>\
							<p>250 Augusta Ave.<br>\
								Suite 208<br>\
								Toronto M5T 2L7</p>\
							<p>phone:<br>\
								416-362-9111<br>\
								Dave’s Cell: 647-202-2316<br>\
								Kevin’s Cell: 647-999-6993</p>\
						</div>\
						<!-- end sidebar -->\
					</div>\
					<!-- end wrapper -->\
				</div>'
	},
	{	// 9
		bClass: 'body contactUs',
		bId: 'body-cu-1',
		brClass: 'browser contactUs cu-1',
		html: '<div class="outer">\
					<div class="wrapper">\
						<h1 id="cuR-h1">Is this you?</h1>\
						<p id="cuR-p">Your company is wonderful but crazy. You need a UX collaborator who can adapt and keep up with you. You are defining a new category; there are no best practices to follow.<br>\
							&nbsp;&nbsp;&nbsp;&nbsp;Your digital product competes on quality. You need your next release to lead the category.<br>\
							&nbsp;&nbsp;&nbsp;&nbsp;You need a UX team that can collaborate with your agile development team. You need help defining UX processes that will work for your unique situation.</p>\
						<div class="sidebar sbLeft">\
							<h2>Contact Smackerel</h2>\
							<p>email: <a href="mailto:dave@smackerel.net" title="dave@smackerel.net">dave@smackerel.net</a><br>\
								<a href="mailto:kevin@smackerel.net" title="kevin@smackerel.net">kevin@smackerel.net</a></p>\
							<p>250 Augusta Ave.<br>\
								Suite 208<br>\
								Toronto M5T 2L7</p>\
							<p>phone:<br>\
								416-362-9111<br>\
								Dave’s Cell: 647-202-2316<br>\
								Kevin’s Cell: 647-999-6993</p>\
						</div>\
						<!-- end sidebar -->\
					</div>\
					<!-- end wrapper -->\
				</div>'
	}
];

var Nav = {
	curWidth: null,
	curHeight: null,
	pages: 10,
	currPage: null,
	nextPage: null,
	browserSize: function() {
		var minWidth = 1000;
		var minHeight = 600;
		var newWidth = $(window).width();
		var newHeight = $(window).height();
		this.curWidth = (newWidth > minWidth) ? newWidth : minWidth;
		this.curHeight = (newHeight > minHeight) ? newHeight : minHeight;
		$('div.body, div.window, div.browser').css({
			'width': Nav.curWidth + 'px',
			'height': Nav.curHeight + 'px'
		});
		$('div.browserFloats').css({
			'width': (Nav.curWidth * 3) + 'px',
			'height': Nav.curHeight + 'px',
			'left': '-' + Nav.curWidth + 'px'
		});
		$('#' + Nav.currPage).css({
			'left': Nav.curWidth + 'px',
			'height': Nav.curHeight + 'px',
			'left': Nav.curWidth + 'px'
		});
	},
	cuSubNav: function() {
		$('#sn-contactUs li a').click(function() {
			var liClass = $(this).parent().attr('class');
			var nextId = (liClass == 'aboutYou') ? 9 : parseInt(liClass.split('-')[1]) + 8;
			var currId = parseInt($('div.browser').attr('id').split('-')[1]);
			if (nextId != currId) {
				Nav.transRight(nextId);
				setTimeout(function() {
					$('#sn-contactUs').hide();
					$('#sn-aboutYou').show();
				}, 250);
			}
			return false;
		});
	},
	aySubNav: function() {
		$('#sn-aboutYou li a').click(function() {
			var liClass = $(this).parent().attr('class');
			var nextId = (liClass == 'aboutUs') ? 8 : parseInt(liClass.split('-')[1]) + 8;
			var currId = parseInt($('div.browser').attr('id').split('-')[1]);
			if (nextId != currId) {
				Nav.transLeft(nextId);
				setTimeout(function() {
					$('#sn-aboutYou').hide();
					$('#sn-contactUs').show();
				}, 250);
			}
			return false;
		});
	},
	owSubNav: function() {
		$('#sn-ourWork li a').click(function() {
			var liClass = $(this).parent().attr('class');
			if (liClass == 'next') {
				var nextId = parseInt($('div.browser').attr('id').split('-')[1]) + 1;
				if (nextId == 8) {	// ALERT: Go back to the home page
					// Nav.subNavTrans('ourWork', 'contactUs');
					nextId = 1;
					// Nav.transLeft(nextId);
					Nav.transRight(nextId);
				} else 
					Nav.transRight(nextId);
			} else {
				var nextId = parseInt(liClass.split('-')[1]) + 1;
				var currId = parseInt($('div.browser').attr('id').split('-')[1]);
				if (nextId != currId) {
					if (nextId > currId) 
						Nav.transRight(nextId);
					else 
						Nav.transLeft(nextId);;
				}
			}
			if (nextId == 2) {
				projectsMo();
				NiceLightboxJQuery.init('ul.projects li a');
			}
			if (nextId == 5) {
				// projectsMo();
				NiceLightboxJQuery.init('#leapfrog');
			}
			if (nextId == 6) {
				// projectsMo();
				NiceLightboxJQuery.init('#canwest');
			}
			return false;
		});
	},
	transRight: function(id) {
		var bClass = Pages[id].bClass;
		var bId = Pages[id].bId;
		var brClass = Pages[id].brClass;
		var html = Pages[id].html;
		$('#' + Nav.currPage).after('<div id="page-' + id + '"></div>');
		$('#page-' + id).attr('class', brClass).css({
			'width': Nav.curWidth + 'px',
			'height': Nav.curHeight + 'px',
			'left': (Nav.curWidth * 2) + 'px'
		}).html(html).animate({
			'left': Nav.curWidth + 'px'
		}, 500);
		$('#' + Nav.currPage).animate({
			'left': '0px'
		}, 500, function() {
			$('#' + Nav.currPage).remove();
			Nav.currPage = 'page-' + id;
		});
		setTimeout(function() {
			$('div.body').attr({
				'class': bClass,
				'id': bId
			});
		}, 250);
	},
	transLeft: function(id) {
		var bClass = Pages[id].bClass;
		var bId = Pages[id].bId;
		var brClass = Pages[id].brClass;
		var html = Pages[id].html;
		$('#' + Nav.currPage).before('<div id="page-' + id + '"></div>');
		$('#page-' + id).attr('class', brClass).css({
			'width': Nav.curWidth + 'px',
			'height': Nav.curHeight + 'px',
			'left': '0px'
		}).html(html).animate({
			'left': Nav.curWidth + 'px'
		}, 500);
		$('#' + Nav.currPage).animate({
			'left': (Nav.curWidth * 2) + 'px'
		}, 500, function() {
			$('#' + Nav.currPage).remove();
			Nav.currPage = 'page-' + id;
		});
		setTimeout(function() {
			$('div.body').attr({
				'class': bClass,
				'id': bId
			});
		}, 250);
	},
	subNavTrans: function(currClass, clickedClass) {
		if (currClass != 'home') 
			$('#sn-' + currClass).fadeOut(250);
			if (currClass == 'contactUs') 
				$('#sn-aboutYou').fadeOut(250);;
		if (clickedClass != 'home') {
			setTimeout(function() {
				$('#sn-' + clickedClass).fadeIn(250);
			}, 250);
		} else {
			setTimeout(function() {
				Nav.setHomeButtons();
			}, 500);
		}
	},
	setTopNavButtons: function() {
		$('ul.sectionNav li a').click(function() {
			var currClass = $('div.body').attr('class').split(' ')[1];
			var clickedClass = $(this).attr('id').split('-')[1];
			if (currClass != clickedClass) {
				if (currClass == 'home') {
					if (clickedClass == 'ourWork') 
						Nav.transRight(1);
					else 
						Nav.transLeft(8);
				} else if (currClass == 'ourWork') {
					if (clickedClass == 'home') 
						Nav.transLeft(0);
					else 
						Nav.transRight(8);
				} else {
					if (clickedClass == 'home') 
						Nav.transRight(0);
					else 
						Nav.transLeft(1);
				}
				Nav.subNavTrans(currClass, clickedClass);
			}
			return false;
		});
	},
	setHomeButtons: function() {
		$('#btn-1-right, #btn-9-left').click(function() {
			var id = $(this).attr('id').split('-')[1];
			var direction = $(this).attr('id').split('-')[2];
			if (direction == 'right') {
				Nav.transRight(id);
				Nav.subNavTrans('home', 'ourWork');
			} else {
				Nav.transLeft(id);
				Nav.subNavTrans('home', 'aboutYou');
			}
			return false;
		});
	},
	init: function() {
		this.currPage = $('div.browser').attr('id');
		this.browserSize();
		$(window).resize(function() {
			Nav.browserSize();
		});
		if (typeof window.orientation !== 'undefined') {
			// window.alert('Test.');
			document.addEventListener('orientationchange', function() {
				Nav.browserSize();
			});
		}
		this.setTopNavButtons();
		this.owSubNav();
		this.cuSubNav();
		this.aySubNav();
	}
};