$(document).ready(function() {
	
	// launch the tour
	$('div.tour').click(function() {
		jQuery.facebox(function() {
      jQuery.get('/tour', function(data) {
        jQuery.facebox(data)
      });
    });
	});
	
	// validate all forms
	$("form").validationEngine();
	
	$('div#noFlash').click(function() {
		document.location = "http://get.adobe.com/flashplayer/";
	});
	
	$('a[rel*=facebox]').facebox();
	
	// go to home page
	$('div#logo').click(function() {
		document.location = '/';
	});
	
	NAV_ROLL.rollover.init();
});

NAV_ROLL = {};
NAV_ROLL.rollover = {
	init: function() {
		this.preload();

		$("img.ro").hover(
			function () { $(this).attr( 'src', NAV_ROLL.rollover.newimage($(this).attr('src')) ); }, 
			function () { $(this).attr( 'src', NAV_ROLL.rollover.oldimage($(this).attr('src')) ); }
			);
		},

		preload: function() {
			$(window).bind('load', function() {
				$('img.ro').each( function( key, elm ) { $('<img>').attr( 'src', NAV_ROLL.rollover.newimage( $(this).attr('src') ) ); });
			});
		},

		newimage: function( src ) { 
			return src.substring( 0, src.search(/(\.[a-z]+)$/) ) + '_on' + src.match(/(\.[a-z]+)$/)[0];
		},

		oldimage: function( src ) {
			return src.replace(/_on\./, '.'); 
		}
};

function style_group_changed(id, selected_style_type_id, selected_style_id) {	
	if (id) {
		// populate the style types and styles based on the style group selected
		populate_select('/style_groups/' + id + '/style_types', 'design_style_type_id', selected_style_type_id);
		populate_select('/style_groups/' + id + '/styles', 'design_style_id', selected_style_id);
	} else {
		// no style group was selected, so clear the style types and styles
		clear_select('design_style_type_id');
		clear_select('design_style_id');
	}
	clear_select('design_style_material_id');
}

function style_type_changed(id, selected_style_id) {	
	if (id) {
		// populate the styles based on the style type selected
		populate_select('/style_types/' + id + '/styles', 'design_style_id', selected_style_id);
	} else {
		// no style type was selected, so populate the styles based on the style group selected earlier
		style_group_id = $("select#design_style_group_id").val();
		populate_select('/style_groups/' + style_group_id + '/styles', 'design_style_id', selected_style_id);
	}
	clear_select('design_style_material_id');
}

function style_changed(id, selected_style_material_id) {	
	if (id) {
		populate_select('/styles/' + id + '/style_materials', 'design_style_material_id', selected_style_material_id);
	} else {
		clear_select('design_style_material_id');
	}
}

// clears a dropdown box of all values, replacing them with a blank value
function clear_select(dropdown_id) {
	$("select#" + dropdown_id).html('<option></option>');
}

// populates a dropdown box via json call
// pass in the json url and the id of the dropdown box to update
function populate_select(json_url, dropdown_id, selected_id) {
	
	$.getJSON(json_url, function(data) {
		var options = '<option value=""></option>';
		// loop through the style types
		$.each(data, function(i,item) {
			options += '<option value="' + item.id + '"';
			if (selected_id && selected_id == item.id) {
				options += ' selected';
			}
			options += '>' + item.title + '</option>';
		});
		$("select#" + dropdown_id).html(options);
	});
	
}