var house = null;
var roof  = null;
var color = null;
var lastImageLoaded = null;
var showLoupe = false;

$(document).ready(function(){
	
	// setup event listeners
	$('#zoom a').click(function() {
		toggleLoupe(this);
		return false;
	});
	$('#house a').click(function() {
		updateSetting('house', this.rel);
		return false;
	});
	$('#roof a').click(function() {
		updateSetting('roof', this.rel);
		return false;
	});
	$('#color a').click(function() {
		updateSetting('color', this.rel);
		return false;
	});

	// register settings from location hash
	var hash = window.location.hash.substr(1);
	if (hash) {
		var settings = hash.split('-');
		house = settings[0];
		roof  = settings[1];
		color = settings[2];
	} else {
		house = 'bungalow';
		roof  = 'rib';
		color = 'dark_red';
	}
	
	updateSetting();
});

function getHousesArray() {
	var houses = new Array();
	$('#house a').each(function(){
		houses.push(this.rel);
	});
	return houses;
}

function selectPreviousHouse() {
	houses = getHousesArray();
	var index = houses.indexOf(house);
	index--;
	if (index < 0) 
		index = houses.length - 1;
	house = houses[index];
	updateSetting();
}

function selectNextHouse() {
	houses = getHousesArray();
	var index = houses.indexOf(house);
	index++;
	if (index >= houses.length) 
		index = 0;
	house = houses[index];
	updateSetting();
}

function updateSetting(name, value) {
	
	// update global variables
	if (name == 'house') {
		house = value;
	} else
	if (name == 'roof') {
		roof = value;
	} else
	if (name == 'color') {
		color = value;
	}
	
	// update selection
	$('#house a').each(function(){
		if (house == this.rel) 
			this.className = 'selected';
		else
			this.className = '';
	});
	$('#roof a').each(function(){
		if (roof == this.rel) 
			this.className = 'selected';
		else
			this.className = '';
	});
	$('#color a').each(function(){
		if (color == this.rel) 
			this.className = 'selected';
		else
			this.className = '';
	});
	
	// create hash for filename
	var filename = house + '-' + roof + '-' + color;
	window.location.hash = filename;

	// insert image into container
	$('#image').empty();
	$('#image').append(lastImageLoaded);
	lastImageLoaded = '<img src="/showcase_assets/photos/' + filename + '.jpg">';
	$('#image').append(lastImageLoaded);
	
	// show loading image
	$('#loading').show();
		
	// begin slideshow once the images have been loaded
	var newImage = $('#image img').last();
	newImage.load(function(){
		$('#loading').hide();
		beginSlideshow();
	});
	
	initializeLoupe();
}

function beginSlideshow() {
	
	// initialize and advance slideshow
	$('#image')
		.cycle({ 
		    fx:           'fade',
		    speed:         1000,
			timeout:       1000,
			autostop:      1,
			nowrap:        1,
			requeueOnImageNotLoaded: false
		})
		.cycle('next');
}

function initializeLoupe() {
		
	// remove existing loupe
	$('.loupe').remove();
	
	// return before binding loupe events when showLoupe == false
	if (!showLoupe) return;

	// create loupe for newest image
	var newImage = $('#image img').last();
	newImage.loupe({
		height:      216,
		width:       216,
		insetHeight:   8,
		insetWidth:    8
		});
}

function toggleLoupe(sender) {
	showLoupe = !showLoupe;
	sender.className = (showLoupe) ? 'zoom-enabled' : 'zoom-disabled';
	
	
	$('#image img').each(function() {
		var $this = $(this);
		$this.unbind();
	});
	
	initializeLoupe();
}