window.addEvent('domready', function() {
	
	// Handle Clicking a sub-feature
	$$(".hfThumb").each(function(element) {
				
		element.addEvent('click', function() {
				
			var artNew = this.get('alt');
			$("hfCurrent").set("value", artNew);
		
			$$("#hfMain a").each(function(element) {
				
										$$("#hfMain a div").each(function(element) { element.dispose(); });
										$$("#hfMain a").each(function(element) { element.dispose(); });
																				
										var nowArt = $("hfCurrent").get("value");
										
										$$(".hfThumb").each(function(element) {
											element.setStyle("border-color", "#FFFFFF");
										});
										
										$("hft"+nowArt).setStyle("border-color", "#cf0000");
										
										loadFeature(nowArt);
										
						});
			
			
			
			
			
			
		});
	});
	
	// Get initial article ID
	var firstArt = $('hfCurrent').get("value");
	
	// Load first feature
	loadFeature(firstArt);
	
	// Update Main Feature
	function loadFeature(art) {
		
		new Request.JSON({
			url: '/homeFeature.php',
			method: 'get',
			onComplete: function(data){
			
				new Element("a").set({
					"opacity": 0,
					"id": "hfi"+data.banner_id,
					"href": data.link
					
				})
				.setStyles({"width": "288px", "height": "196px", "border": "0", "display": "block", "cursor": "pointer", "color": "#FFFFFF"})
				.inject($("hfMain", 'top'));
				
				
				new Element("img").set("src", "/data/bannersHome/main/" + data.banner_id + "." + data.name)
				.setStyles({ 
					"width": "288px",
					"height": "196px"
					})
				.inject($("hfi"+data.banner_id, 'bottom'));
				
				
				
				// Control feature fade-in time
				var contentIn = new Fx.Tween($("hfi"+data.banner_id), {
									'duration': '2500'
							});
	
				contentIn.start('opacity', 1);
				
			}
		}).get({'art': art, 'key': '1'});
		
	};
	
	
	// Article Rotator
	var erot = function rotator() {
		
		// Current Article
		var curArt = $("hfCurrent").get("value");
		
		new Request.JSON({
			url: '/homeFeature.php',
			method: 'get',
			onComplete: function(data){
				
				$("hft"+data).fireEvent("click");
					
			}
		}).get({'art': curArt, 'key': '2'});
	
		
	};
	var erotor = erot.periodical(9000);
	
		
		

	
});