window.addEvent('domready', function() {

	var contents = new Hash({
	'linkOverview': "<p>This is The Weather 2. Forget everything you thought you knew about iPhone weather apps. The Weather 2 makes getting the weather data you need super easy, fast, and more beautiful than ever.</p><p>The Weather 2 brings a brand new user interface, awesome customization, fantastic weather data, and a world-class radar to the palm of your hand. The Weather 2 sets a new bar for iPhone weather apps.</p><p>And the best part? If you already own the original version of The Weather, you get this update free. If you don't, you get both the iPhone and the iPad version for just a buck.</p>",
	
	'linkCustomization': "<p>The Weather 2 was designed to let your satisfy that weird bit of you that needs to have the temperature right next to barometric pressure. With The Weather 2, put pretty much any bit of data you could ever want onto one (or more!) custom pages. Customization is dead simple, too, all you have to do is drag and drop.</p><p>Create a custom page (or two, or twenty) to see exactly the bits of weather data you want to see. All you want to see is a big temperature reading? You got it. Want to see five different measurements at the same time, as well as a radar overview? No problem. The Weather 2 has got you covered.</p>",
	
	'linkUI': "<p>User interface design is about more than just making an app look pretty. UI is about how you <b>use</b> your apps, not about how shiny they are. The Weather 2 knows this. But it looks pretty good too.</p><p>Everyone uses an app differently. The Weather 2 is designed around that fact. That's why The Weather 2 allows for totally custom pages: because this app was designed for you. Details were sweated.</p>",

	'linkRadar': "<p>Control the radar just like you would regular Google Maps, pinch and pan, The Weather 2 has got your back. And this isn't just any old radar we're talking about here; this is world class <a href='http://wunderground.com'>Weather Underground</a> animated radar in the palm of your hand. Seamlessly integrated with Google Maps, The Weather 2 takes radar to a whole new level.</p><p>And beginning with The Weather 2.2, radar features best in class radar customization: change everything from the radar type (NEXRAD, Visible Satellite, or Infrared Satellite) to sensitivity, to overlays.",

	'linkData': "<p>The Weather 2 gets its weather data from the best source around, <a href='http://wunderground.com'>Weather Underground</a>. This means you've always got the most accurate, recent weather data on your device. And with version 2.1, you can even choose which weather station you want to get data from - even from personal weather stations.</p><p>And of course, The Weather 2 aggressively caches data - this means that even if you go into an area without service, or are using an iPod touch and are without WiFi, you can still see the weather information you need. With The Weather 2, you'll never be without weather data again.</p>",
	
		
	'linkiOS': "<p>The Weather 2 was designed to take advantage of all the cool new things in iOS 4. Everything looks sharp on the new iPhone 4, thanks to support for the Retina Display. Quick switching support means you never have to wait on The Weather 2.</p><p>The Weather 2 also supports multitasking. Say you're on a road trip, and always want to see the weather for the place you happen to be in. The Weather 2 will track your location in the background, notice you've moved to a different area, and update the weather for that area automatically. The new data will be waiting for you next time you open the app.</p>",

	'linkGallery': "<p><a href='#' class='thumbLink'/><img src='images/linkGalleryThumb.png' rel='test' class='thumb' /></a><a href='#' class='thumbLink' /><img src='images/galleryTwoThumb.png' class='thumb' /></a><a href='#' class='thumbLink' /><img src='images/galleryThreeThumb.png' class='thumb' /></a></p><p><a href='#' class='thumbLink' /><img src='images/galleryFourThumb.png' class='thumb' /></a><a href='#' class='thumbLink' /><img src='images/galleryFiveThumb.png' class='thumb' /></a><a href='#' class='thumbLink' /><img src='images/gallerySixThumb.png' class='thumb' /></a></p>",
	
	'linkHelp': "<p>You can reach me via twitter <a href='http://twitter.com/clinkapps'>@clinkapps</a> or via email at <a href='mailto:hello@clinkapps.com'>hello@clinkapps.com</a></p><h1>Common Issues</h1><dl><dt>Connection Error? What Gives?</dt><dd>This usually just means the app didn't like the data it just read. Just wait a minute, and it'll fix itself.</dd><dt>Where's my metric support?</dt><dd>In the settings app.</dd></dl>"
		
	});

	var titles = new Hash({
	'linkOverview': "Say Hello to The Weather 2",
	
	'linkCustomization': "Your Weather. Built to Order.",

	'linkUI': "A Whole New Way to Look at the Weather",

	'linkRadar': "Not Your Mother's Radar",

	'linkData': "Top-Notch Data from Wunderground",

	'linkiOS': "The Weather 2: Model iOS 4 Citizen",

	'linkGallery': "Lots of Pictures.",
	
	'linkHelp': "Questions? Comments? Threats?"

	});
	
	
	titles.each(preloadImage);
	
	doRequest('linkOverview');

	var myKeyboardEvents = new Keyboard({
    defaultEventType: 'keyup', 
    events: { 
        'up': previousItem, 
        'down': nextItem,
        'right': nextItem, 
        'left': previousItem
    }
});
	
	function currentIndex() {
		
		return titles.getValues().indexOf(String($$('h1').get('text')));
		
	}
	
	function nextItem() {

		if (currentIndex() < (titles.getKeys().length - 1)) {
			doRequest(titles.getKeys()[currentIndex() + 1]);
		}		
			
	}

	function previousItem() {
		
		if (currentIndex() > 0) {
			doRequest(titles.getKeys()[currentIndex() - 1]);
		}		

	}
	
    $('linkOverview').addEvent('click', function(e) {
		doRequest('linkOverview');
	});
	$('linkData').addEvent('click', function(e) {
		doRequest('linkData');
	});
	$('linkRadar').addEvent('click', function(e) {
		doRequest('linkRadar');
	});
	$('linkCustomization').addEvent('click', function(e) {
		doRequest('linkCustomization');
	});
	$('linkUI').addEvent('click', function(e) {
		doRequest('linkUI');
	});
	$('linkiOS').addEvent('click', function(e) {
		doRequest('linkiOS');
	});
	$('linkGallery').addEvent('click', function(e) {
		doRequest('linkGallery');
	});
	$('linkBuy').addEvent('click', function(e) {
		window.location = 'http://itunes.apple.com/us/app/the-weather/id351064928?mt=8';
	});
	$('linkHelp').addEvent('click', function(e) {
		doRequest('linkHelp');
	});

	function doRequest(page) {		

		$$('.selected').set('class', '');
		
		$(page).set('class', 'selected');
		
		var copyHolderFx = new Fx.Tween($('copyHolder'), {
			onStart: function (){
				$('iPhoneScreenshot').fade(0);
			},
			onComplete: function() {
				$('copyHolder').set('html', '<h1>' + titles.get(page) + '</h1>' + contents.get(page));
				setScreenshot(page);
				$('copyHolder').fade(1);
				$('iPhoneScreenshot').fade(1);	
				
			}
		}
		).start('opacity', 0);
							
 	}
 	
 	function setScreenshot(screenshot) {

			configureImages();

 			$('iPhoneScreenshot').set('html', '<div id="giantButton" style="display:none"></div><a href="images/' + screenshot + 'Giant.png" target="_blank"><img id="screenshot' + screenshot + '" src="images/' + screenshot + '.png"></a>');		
 			$('screenshot' + screenshot).addEvent('click', function(e) {
				
				
			});
			
			$('iphoneLoupe').setStyle('background-image', 'url(images/' + screenshot + 'Giant.png)');

			$('screenshot' + screenshot).addEvent('mousemove', function(e) {
				repositionImage(e.client.x, e.client.y);
			});

			$('iphoneLoupe').addEvent('mousemove', function(e) {
				repositionImage(e.client.x, e.client.y);
			});
			
			
 			$('screenshot' + screenshot).addEvent('mouseenter', function(e) {
 						//('iphoneLoupe').setStyle('visibility', 'visible');
 						growLoupe(e.client.x, e.client.y);

			});
			
 			$('iphoneLoupe').addEvent('mouseout', function(e) {

 				
 				shrinkLoupe(e.client.x, e.client.y);

			});
			

 	}
 	
 	function repositionImage(x, y) {
 	
 		if ($('iphoneLoupe').getStyle('width') != '200px'){ 
 			return;
 		}
 		
 		
 		var pWidth;
 		if (typeof window.innerWidth != 'undefined') {
    	  	pWidth = window.innerWidth;
 		} else {
 			pWidth = document.documentElement.clientWidth;
 		}
 		
 		if ((((pWidth/2) + 200) > (x + 50)) || (((pWidth/2) + 440) < (x + 20)) || (160 > (y + 30)) || ((520) < (y+ 20))) {
 			return;
 		}
 	
 		$('iphoneLoupe').setStyles({
 			'margin-left': (x - 100),
 			'margin-top': (y - 100),
 			'background-position': (((-1 * x) + (pWidth/2 + 200)) / .375) + 'px ' + (((-1 * y) + 160) / .375) + 'px'
 		});
 					
 	}
 	
 	function growLoupe(x,y) {
  	
  	 	 	var pWidth;
 		if (typeof window.innerWidth != 'undefined') {
    	  	pWidth = window.innerWidth;
 		} else {
 			pWidth = document.documentElement.clientWidth;
 		}

 	 	var myEffect = new Fx.Morph('iphoneLoupe', {duration: 'short', transition: Fx.Transitions.Sine.easeOut});
 
		myEffect.start({
    		'height': [0, 200],
   		 	'width': [0, 200],
   		 	'margin-left': [x-100, x-100],
   		 	'margin-top': [0, y-100],
   		 	'background-position': (((-1 * x) + (pWidth/2 + 200)) / .375) + 'px ' + (((-1 * y) + 160) / .375) + 'px',
   		 	'border-width':3,
   		 	onComplete: repositionImage(x,y)
		});

 	}
 	
 	function shrinkLoupe(x,y) {
 	
 	 	var pWidth;
 		if (typeof window.innerWidth != 'undefined') {
    	  	pWidth = window.innerWidth;
 		} else {
 			pWidth = document.documentElement.clientWidth;
 		}

 	 	var myEffect = new Fx.Morph('iphoneLoupe', {duration: 'short', transition: Fx.Transitions.Sine.easeOut});
 
		myEffect.start({
   			'height': [200, 0],
    		'width': [200, 0],
 			'border-width': 0
 		});

 	}
 	
 	
 	function configureImages() {
 	
 	 		$$('.thumb').each(function(item){
 	 		
 				var imageName = item.get('src').replace('Thumb.png', '').replace('images/', '');
 				preloadImage(null, imageName);

 			    item.addEvent('click', function(e) {
					setScreenshot(imageName);
				});

 				
 			
 			});	

 	}
 	
 	function preloadImage(image, key) {	 	
 	
 		pic = new Image(240,360); 
		pic.src = 'images/' + key + '.png'; 
		pic.src = 'images/' + key + 'Giant.png'; 

 	
 	}
	

});