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) {
				
				// Control feature fade-in time
				var contentOut = new Fx.Tween(element, {
									'duration': '1200',
									onComplete: function() {
										
										$$("#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);
										
									}
							});
	
				contentOut.start('opacity', 0);
			
			});
			
			
			
			
			
			
		});
	});
	
	// 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.article_id,
					"href": "/?c="+data.category_id+"&a="+data.article_id
					
				})
				.setStyles({"background": "url('/articles/420/" + data.article_id + ".jpg') no-repeat top center", "width": "420px", "height": "250px", "border": "0", "display": "block", "cursor": "pointer", "color": "#FFFFFF"})
				.inject($("hfMain", 'top'));
				
				
				new Element("div").set({"html": data.title, "class": "hfText"})
				.setStyles({ 
					"position": "relative",
					"top": "170px",
					"margin": "5px",
					"margin-top": "0",
					"padding": "5px",
					"background": "#000",
					"opacity": "0.8",
					"font-weight": "bold",
					"font-size": "24px",
					"text-align": "center"
					})
				.inject($("hfi"+data.article_id, 'bottom'));
				
				
				
				// Control feature fade-in time
				var contentIn = new Fx.Tween($("hfi"+data.article_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(7000);
	
		
		

	
});