jQuery(document).ready(function() {
if(jQuery('div#feature_widget').length) {	
get_widget_data();
}
});

// http://stackoverflow.com/questions/2519818/create-a-permalink-with-javascript/2519910#2519910
function doDashes(str) {
    return str.replace(/[^a-z0-9]+/gi, '-').replace(/^-*|-*$/g, '').toLowerCase();
}

// http://stackoverflow.com/questions/476679/preloading-images-with-jquery
function preload_images() {
	//	assemble array of images first
	var images = [];
	jQuery(window.json_data).each(function(d) {
		images.push(window.json_data[d].Filename);
	});			

    jQuery(images).each(function(){
        jQuery('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}


function change_picture() {
	var current_headline = jQuery('#currently_selected');
	var index = jQuery('#currently_selected').attr('rel');
	
	if(current_headline.attr('class') == 'last') {
		//	Current one to black
		//jQuery('li[rel=' + (index + 1) + '] img').attr('src', '/oakleesguide/html/images/green_dot.gif');
		//jQuery('li[rel=' + index + '] img').attr('src', '/oakleesguide/html/images/black_dot.gif');
		
		//	Then reset to the beginning
		current_headline.attr('id', '')
		jQuery('#feature_widget li').first().attr('id', 'currently_selected');

		//	index needs to be reset
		var index = jQuery('#currently_selected').attr('rel') - 1;
	} else {
		//if(jQuery('li[rel=5] img').attr('src') == '/oakleesguide/html/images/green_dot.gif') {
		//	jQuery('li[rel=5] img').attr('src', '/oakleesguide/html/images/black_dot.gif');
		//}
		
		
		//jQuery('li[rel=' + (index) + '] img').attr('src', '/oakleesguide/html/images/black_dot.gif');
		//jQuery('li[rel=' + (index + 1) + '] img').attr('src', '/oakleesguide/html/images/green_dot.gif');
		jQuery('#currently_selected').attr('id', '').next('li').attr('id', 'currently_selected');
	}
	
	//	Now change the headline, lede and picture
	jQuery('#feature_widget #story a').attr('href', '/features/' + doDashes(window.json_data[index].title) + '-' + window.json_data[index].id + '.html');	
	jQuery('#feature_widget h3').text(window.json_data[index].title);
	jQuery('#feature_widget p').text(window.json_data[index].subhead);
	jQuery('#story img').attr('src', window.json_data[index].Filename);
	//	eureka! it works!
}

function setup_widget() {
	//	Highlight the first story
	jQuery('#feature_widget li').last().attr('class', 'last');
	jQuery('#feature_widget li').first().attr('id', 'currently_selected');
	
	jQuery('#feature_widget h3').text(window.json_data[0].title);
	jQuery('#feature_widget p').text(window.json_data[0].subhead);
	jQuery('#story img').attr('src', window.json_data[0].Filename);
	
	//	Loop through each li in the list and assign it the proper headline
	jQuery(window.json_data).each(function(d) {
		jQuery('#feature_widget #story a').attr('href', '/features/' + doDashes(window.json_data[d].title) + '-' + window.json_data[d].id + '.html');
		jQuery('#feature_widget ul li[rel=' + (d + 1) + '] a').attr('href', '/features/' + doDashes(window.json_data[d].title) + '-' + window.json_data[d].id + '.html');
		jQuery('#feature_widget ul li[rel=' + (d + 1) + '] a').text(window.json_data[d].title);

		//	Mark it as used
		jQuery('#feature_widget ul li[rel=' + (d + 1) + ']').addClass('used');
	});
	
	//	Take out those that are unused
	delete_unused_slots();
}

function get_widget_data() {
/*
	jQuery.getJSON('ajax/get_feature_widget_data.php', function(data) {
		alert(data[0].id);
	});
*/

	//	New: It can be asynchronous because we're creating the widget on the callback...if it ever runs
	jQuery.ajax({  
	  url: 'ajax/get_feature_widget_data.php',  
	  dataType: 'json',
	  async: true,  
	  success: function(json){
		window.json_data = json;
		preload_images();
		setup_widget();
		window.setInterval(change_picture, 5000);
	  }  
	});
}

function delete_unused_slots() {
	var unused_slots = jQuery("#feature_widget ul li").not('.used');
	unused_slots.remove();
	
	//	Assign the "last" class to the last one
	jQuery('#feature_widget li').last().attr('class', 'last');	
}