$(document).ready(function(){
	
	/* 30 ft. designs models */
	var cat_30 = new Category('30','30 ft. Designs');
	cat_30.add_item(new Model('30','1','The Glen Hill-1','1316','1367'));
	cat_30.add_item(new Model('30','2','The Glen Hill-2','1565','1587'));
	cat_30.add_item(new Model('30','3','The Glen Hill-3','1722','1702'));
	cat_30.add_item(new Model('30','4','The Glen Hill-4','1803','1816'));
	cat_30.add_item(new Model('30','5','The Glen Hill-5','1867','1864'));
	
	/* 36 ft. design models */
	var cat_36 = new Category('36','36 ft. Designs');
	cat_36.add_item(new Model('36','3','The Woods Grove-3','1832','1847'));
	cat_36.add_item(new Model('36','4','The Woods Grove-4','1976','2003'));
	cat_36.add_item(new Model('36','5','The Woods Grove-5','2062','2060'));
	cat_36.add_item(new Model('36','6','The Woods Grove-6','2243','2258'));
	cat_36.add_item(new Model('36','7','The Woods Grove-7','2360','2326'));
	cat_36.selected = true;
	
	/* Town Homes */
	var cat_th = new Category('TH','Freehold Towns');
	cat_th.add_item(new Model('TH','1','The Nichol-1','1176','1176'));
	cat_th.add_item(new Model('TH','2','The Nichol-2','1256','1256'));
	cat_th.add_item(new Model('TH','3','The Nichol-3','1427','1427','C','D'));
	cat_th.add_item(new Model('TH','4','The Nichol-4','1568','1568'));
	cat_th.add_item(new Model('TH','5','The Nichol-5','1681','1681','C','D'));
	cat_th.add_item(new Model('TH','6','The Nichol-6','1707','1707'));
	cat_th.add_item(new Model('TH','6-Corner','The Nichol-6 Gateway','1707','1707'));
	
	/* 36 ft. Bungalow Designs */
	var cat_36_bd = new Category('36_bd','36 ft. Bungalow Designs');
	cat_36_bd.add_item(new Model('36_bd','1','The Woods Grove-1','1649','1649'));
	cat_36_bd.add_item(new Model('36_bd','2','The Woods Grove-10','2414','2425'));
	cat_36_bd.add_item(new Model('36_bd','3','The Woods Grove-11','1368','1374'));
	
	/* create a list of categories */
	cat_array = new Array();
	cat_array.push(cat_36);
	cat_array.push(cat_36_bd);
	cat_array.push(cat_30);
	cat_array.push(cat_th);
	/* render items*/
	model_arr = cat_36.get_items();
	list_categories(cat_array)
	append_models(model_arr);	
	update_images(model_arr[0],'A');
	
	/* wire up events */
	$('#large-image-display a.gallery, #floor-plan-display a.gallery').click(function(event){
		event.preventDefault();
		$(this).parents('#large-image-display').hide();
		$('#gallery').show();
	});
});


function Model(cat, id, name, size_a, size_b, elev_1, elev_2)
{
	if (elev_1 == undefined)
	{
		elev_1 = 'A';
	}
	if (elev_2 == undefined)
	{
		elev_2 = 'B';
	}
	this.cat_id = cat;
	this.id = id;
	this.name = name;
	this.size_a = size_a;
	this.size_b = size_b;	
	this.elev_1 = elev_1;
	this.elev_2 = elev_2;
	this.model_name;
}

Model.prototype.get_model_name = ModelGetModelName;
function ModelGetModelName()
{
	return 'model-'+this.id;
}

Model.prototype.toString = ModelToString;
function ModelToString()
{
  var text = '<div class="row">';
	text += '<div class="desc">';
	text += '<p class="model-name">'+this.name+'</p>';
	text += '<p class="elev elevA">Elev. '+this.elev_1+' '+this.size_a+' sp.ft.</p>';
	text += '<p class="elev elevB">Elev. '+this.elev_2+' '+this.size_b+' sp.ft.</p>';
	text += '</div>';
	text += '<div class="model-thumb thumb1">';
	text += '  <img id="model-'+ this.id +this.elev_1+'" src="images/models/thumbs/'+this.cat_id + '-' + this.id+this.elev_1+'.jpg" />';
	text += '</div>';
	text += '<div class="model-thumb thumb2">';
	text += '  <img id="model-'+ this.id+this.elev_2+'" src="images/models/thumbs/'+this.cat_id + '-' + this.id+this.elev_2+'.jpg" />';
	text += '</div>';
	text += '</div>';
	
	return text;
}

function Category(cat, name)
{
	this.cat_id = cat;
	this.name = name;
	this.items = new Array();
	this.selected = false;
}


Category.prototype.add_item = CategoriesAddItem;
function CategoriesAddItem(model)
{
	this.items.push(model);
}

Category.prototype.get_items = CategoriesGetItems;
function CategoriesGetItems()
{
	return this.items;
}

Category.prototype.get_model = CategoryGetModel;
function CategoryGetModel(model_name)
{
	for (var i=0,n=this.items.length;i<n;i++)
	{
		if (this.items[i].get_model_name() == model_name)
		{
			return this.items[i];
		}
	}
}


function append_models(arr)
{
	var menu = $('#model-menu div.model-thumbs');
	menu.children().remove();
	for (var i = 0, n = arr.length; i < n; i++)
	{
		menu.append(arr[i].toString());
		var model_name = arr[i].get_model_name();
		$('#'+ model_name + arr[i].elev_1+', #'+ model_name +arr[i].elev_2).click(function(){
			var el = $(this);
			var model_name = el.attr('id').substr(0,el.attr('id').length - 1);
			var elev = el.attr('id').substr(el.attr('id').length - 1,1);
			var cat = get_selected_category();
			update_images(cat.get_model(model_name), elev);
		});
	}
}

function update_images(model,which_thumb)
{
	var display = $('#model-display');
	var other_thumb = (which_thumb == model.elev_1)?model.elev_2:model.elev_1;
	var size = (which_thumb == model.elev_1)?model.size_a:model.size_b;
	
	/*
	var large = display.find('div.large-image').addClass('loading');
	large.find('img').remove();
	
	var img = new Image();
    $(img).load(function(){
    	var me = $(this).hide();
    	
    	$('#model-display div.large-image').removeClass('loading');
    	$('#model-display a.large-image').append(this);
    	me.wrap('<a href=""/>') 
    		.fadeIn();
    })
    */
	// update main image
	display.find('div.large-image').addClass('loading');
    var large = display.find('img.large-image')
    	.load(function(){
    		$(this).hide()
    			.parents('div.large-image')
    			.removeClass('loading');
    		$(this).fadeIn('fast');
    	})
    	.attr("src",'images/models/large/' + model.cat_id + '-'+model.id+which_thumb+'.jpg')
    	.attr('id',model.get_model_name()+which_thumb);
    // add event handler to image
 
	large.click(function(){
		var el = $(this);
		var model_name = el.attr('id').substr(0,el.attr('id').length - 1);
		var elev = el.attr('id').substr(el.attr('id').length - 1,1);
		var model = get_selected_category().get_model(model_name);
		$('#gallery').hide();
		$('#large-image-display').show().addClass('loading');
		// image loading event
		$('#large-image-display img')
			.hide()
			.load(function(){
				$(this)
					.parent()
					.removeClass('loading');
				$(this).fadeIn('fast');
			})
			.attr('src','images/models/full/'+ model.cat_id + '-'+model.id+elev+'.jpg');
	});

	var thumb = display.find('img.large-thumb').attr("src",'images/models/thumbs/' + model.cat_id + '-'+model.id+other_thumb+'.jpg');
	thumb.attr('id',model.get_model_name()+other_thumb);
	//if (!inside)
	{
		thumb.click(function(event){
			$(this).unbind('click');
			var id = $(this).attr('id');
			var model_name = id.substr(0,id.length - 1);
			var cat = get_selected_category();
			update_images(cat.get_model(model_name), id.substr(id.length - 1, 1));
			 
		});
	}
	
	display.find('#model-image-description span.name').text(model.name);
	display.find('#model-image-description span.elevation').text('Elevation-'+which_thumb+' '+size+' sp.ft.');
	display.find('#model-image-description a')
		.attr('id',model.get_model_name())
		.click(function(event){
			event.preventDefault();
			var model_name = $(this).attr('id');
			var cat = get_selected_category();
			var model = cat.get_model(model_name);
			$('#gallery').hide();
			var floor = $('#floor-plan-display');
			floor.show().find('#download').attr('href','pdfs/floorplan-'+ model.cat_id + '-'+model.id+'.pdf');
			floor.addClass('loading');
			floor.find('img').hide().load(function(){
				$(this)
					.parent()
					.removeClass('loading');
				$(this).fadeIn('fast');
			}).attr('src','images/pdf/floorplan-'+ model.cat_id + '-'+model.id+'.png');
	});
}

function list_categories(list)
{
	for (var i=0,n=list.length;i<n;i++)
	{
		var model = $('#model-menu div.models');		
		var selected = (list[i].selected)?'selected':'';
		model.append('<p id="model-'+list[i].cat_id+'" class="models '+selected+'">'+list[i].name+'</p>');
		$('#model-'+list[i].cat_id).click(function(){
			for (var i = 0, n=cat_array.length;i <n;i++)
			{
				var el = $(this);
				if (el.attr('id') == 'model-'+cat_array[i].cat_id)
				{
					// Hide Elevations labels if TownHome
					var labels = $('#headerA p,#headerB p');
					if(cat_array[i].cat_id == 'TH')
					{
						labels.hide();
					}
					else
					{
						labels.show();
					}
					var items = cat_array[i].get_items();
					append_models(items);
					update_images(items[0],items[0].elev_1);
					set_selected_category(cat_array[i].cat_id);
					el.siblings().removeClass('selected');
					el.addClass('selected');
					break;
				}
			}
		});
	}
}

function get_selected_category()
{
	for (var i=0,n=cat_array.length;i<n;i++)
	{
		if (cat_array[i].selected)
		{
			return cat_array[i];
		}
	}
}

function set_selected_category(cat_id)
{
	for (var i=0,n=cat_array.length;i<n;i++)
	{
		cat_array[i].selected = cat_array[i].cat_id == cat_id;
	}
}




