(function($) {
	var cache = [];
	$.preLoadImages = function() {
		var args_len = arguments.length;
		for (var i = args_len; i--;) {
			var cacheImage = document.createElement('img');
			cacheImage.src = arguments[i];
			cache.push(cacheImage);
		}
	}
}(jQuery));
(function ($) {
	$.event.special.load = {
		add: function (hollaback) {
			if ( this.nodeType === 1 && this.tagName.toLowerCase() === 'img' && this.src !== '' ) {
				// Image is already complete, fire the hollaback (fixes browser issues were cached
				// images isn't triggering the load event)
				if ( this.complete || this.readyState === 4 ) {
					hollaback.handler.apply(this);
				}

				// Check if data URI images is supported, fire 'error' event if not
				else if ( this.readyState === 'uninitialized' && this.src.indexOf('data:') === 0 ) {
					$(this).trigger('error');
				}
				
				else {
					$(this).bind('load', hollaback.handler);
				}
			}
		}
	};
}(jQuery));
$(document).ready(function() {
	$('#nav a').hover( function() {
		$(this).children('div.button').not('#subgal').css('background-color', '#A41603');
	},
	function() {
		$(this).children('div').first().css('background-color', '#257583');
	});
	//$('.picker a').text('...');
	$('.picker a').hover( function() {
		$(this).children('.red div').css('background-color', '#A41603');
		$(this).children('.yellow div').css('background-color', '#A41603');
	},
	function() {
		$(this).children('.red div').first().css('background-color', '#92BAC1');
		$(this).children('.yellow div').css('background-color', '#FFEEC9');
	});
	
	 var gallery = {
		'baths' : {
			'title' : 'bathrooms',
			'size' : 12,
			'current' : 1,
			'images' : [
				{
					'number' : 1,
					'description' : 'These two baths belong to a 60s era house...the job was to update them without loosing their context...I exchanged the walnut stained cabinetry and trim with locally sourced walnut, and won space (and comfort) with cabinets built into the wall cavities, using sliding mirrors for doors.'
				},
				{
					'number' : 2,
					'description' : "My starting point, and honestly, the inspiration for the conversion, this time not so difficult."
				},
				{
					'number' : 3,
					'description' : 'The master bath on the other side of the shared wall...again, drawing in similar design elements'
				},
				{
					'number' : 4,
					'description' : 'simply modernizing the room.'
				},
				{
					'number' : 5,
					'description' : 'A closer view of the new vanity.'
				},
				{
					'number' : 6,
					'description' : 'This bath renovation included this cabinetry and tub surround to harmonize with a more eastern feel'
				},
				{
					'number' : 7,
					'description' : ''
				},
				{
					'number' : 8,
					'description' : "This bath may well be the biggest challenge I've faced. Updating an early 20th C bungalow, we went for a completely different look, randomly combining 5 different sized tiles in 3 colors to get the finish the client desired."
				},
				{
					'number' : 9,
					'description' : 'Quite a change from what she had had.'
				},
				{
					'number' : 10,
					'description' : 'Replacing the tub with a walk-in shower provides more freedom of movement, as well.'
				},
				{
					'number' : 11,
					'description' : 'The ash vanity is topped with a top in recycled glass.'
				},
				{
					'number' : 12,
					'description' : 'I designed and built this cabinet to win as much space as simply as possible in a tight corner of the bathroom.'
				}
			]
		},
		'beds' : {
			'title' : 'beds',
			'size' : 9,
			'current' : 1,
			'images' : [
				{
					'number' : 1,
					'description' : 'This is the first of my bed series, in solid maple, on display at The Century House.'
				},
				{
					'number' : 2,
					'description' : 'In this profile shot you get a better view of the pitched headboard, at the perfect angle for reading in bed.'
				},
				{
					'number' : 3,
					'description' : 'Two beds paired at The Bindley Collection.'
				},
				{
					'number' : 4,
					'description' : 'This queen size bed is made of cherry (from a single tree for uniformity of color) and recycled resin panels with bamboo.'
				},
				{
					'number' : 5,
					'description' : ''
				},
				{
					'number' : 6,
					'description' : 'This one is in walnut (again, from a single neighborhood tree) recycled resin panels with green tea.'
				},
				{
					'number' : 7,
					'description' : 'This king size bed is made completely without metal fasteners.'
				},
				{
					'number' : 8,
					'description' : ''
				},
				{
					'number' : 9,
					'description' : 'This bed is a good example of my work with clients...she indicated the sorts of materials she found pleasing, and I worked within those parameters and the room to devise pieces she\'d want. Here she contributed the idea of the "cannonball" feet, I came up with the rest.'
				},
			]
		},
		'cabinets' : {
			'title' : 'cabinets',
			'size' : 12,
			'current' : 1,
			'images' : [
				{
					'number' : 1,
					'description' : "When possible I select lumber from a single tree for furniture...here's a look at what our local walnut can do. I've combined it with a panel of recycled resin and bamboo."
				},
				{
					'number' : 2,
					'description' : ''
				},
				{
					'number' : 3,
					'description' : 'This cabinet is built from locally grown walnut and panels of recycled resin & wheatgrass.'
				},
				{
					'number' : 4,
					'description' : 'I designed this cabinet around the leaded glass doors, which the client already owned.'
				},
				{
					'number' : 5,
					'description' : "I think I'll consider this sideboard a signature piece...this first iteration I designed and built in butternut for a west side (Madison) home."
				},
				{
					'number' : 6,
					'description' : 'Another piece in butternut, this time combined with panels of recycled resin and green tea, it is a media cabinet for the Urban Ecology Center in Milwaukee.'
				},
				{
					'number' : 7,
					'description' : ''
				},
				{
					'number' : 8,
					'description' : 'This rolling cabinet is in a burled elm.'
				},
				{
					'number' : 9,
					'description' : 'with a rear panel of resin.'
				},
				{
					'number' : 10,
					'description' : "I just couldn't resist this grain."
				},
				{
					'number' : 11,
					'description' : 'Wall to wall cabinet storage in beech, to compliment the bed (see king size bed w/o metal fasteners).'
				},
				{
					'number' : 12,
					'description' : 'A wall unit to compliment to the "cannonball" bed.'
				}
			]
		},
		'kitchens' : {
			'title' : 'kitchens',
			'size' : 18,
			'current' : 1,
			'images' : [
				{
					'number' : 1,
					'description' : 'Working within the constraints of the existing room I brightened up a kitchen in a 60s era house, bringing in maple to replace the painted cabinets.'
				},
				{
					'number' : 2,
					'description' : "Here's the kitchen I started with..."
				},
				{
					'number' : 3,
					'description' : 'and here\'s another view of the updated kitchen.'
				},
				{
					'number' : 4,
					'description' : 'While at it, I created a more modern answer for the pantry area in the kitchen.....'
				},
				{
					'number' : 5,
					'description' : 'updating the storage from this.'
				},
				{
					'number' : 6,
					'description' : "This fairly sizable kitchen didn't offer many options for efficient use, so I worked with the same cabinet layout..but trading cherry for this white melamine the owners had been living with...."
				},
				{
					'number' : 7,
					'description' : 'this white melamine, if you see what I mean'
				},
				{
					'number' : 8,
					'description' : 'What is new are several large pantry cabinets, '
				},
				{
					'number' : 9,
					'description' : 'and more useable storage in accessible drawers.'
				},
				{
					'number' : 10,
					'description' : 'My client sought to modernize the kitchen in her early 20C bungalow, without losing the period feel it had.'
				},
				{
					'number' : 11,
					'description' : 'I worked to keep the details true to existing ones, such as reflecting the window configuration in the cabinet doors.'
				},
				{
					'number' : 12,
					'description' : 'This kitchen is the product of a massive overhaul....an opportunity the clients seized for less crowding and more amenities. We mixed it up a bit stylistically.'
				},
				{
					'number' : 13,
					'description' : ''
				},
				{
					'number' : 14,
					'description' : ''
				},
				{
					'number' : 15,
					'description' : ''
				},
				{
					'number' : 16,
					'description' : 'As my client is an enthusiastic and  proficient baker, the cabinets were built to a lower height to provide a more comfortable work height.'
				},
				{
					'number' : 17,
					'description' : '(perhaps not so easy to see in the photos)'
				},
				{
					'number' : 18,
					'description' : 'This generous room serves various functions...as the kitchen it is also a major gathering place; likewise it is just off a highly used entrance'
				}
			]
		},
		'living_rooms' : {
			'title' : 'living rooms',
			'size' : 15,
			'current' : 1,
			'images' : [
				{
					'number' : 1,
					'description' : 'Something like this is what you might get if you leave it all up to me...'
				},
				{
					'number' : 2,
					'description' : 'after introducing me to this.'
				},
				{
					'number' : 3,
					'description' : 'The floating mantel and fireplace trim are fabricated from locally sourced walnut.'
				},
				{
					'number' : 4,
					'description' : ''
				},
				{
					'number' : 5,
					'description' : 'A modern, floating box mantel in ash.'
				},
				{
					'number' : 6,
					'description' : ''
				},
				{
					'number' : 7,
					'description' : "Here I've retrofitted a builtin cabinet/bookcase and created a window seat over the radiator, matching the style details of the house, resulting in a more comforting atmosphere..."
				},
				{
					'number' : 8,
					'description' : 'as compared with the ambience of the previously exposed fixtures.'
				},
				{
					'number' : 9,
					'description' : ''
				},
				{
					'number' : 10,
					'description' : 'This is a sitting area to a kitchen remodel.'
				},
				{
					'number' : 11,
					'description' : ''
				},
				{
					'number' : 12,
					'description' : "This bumpout transformed the living room of the early 20C four square on Madison's west side."
				},
				{
					'number' : 13,
					'description' : 'The room I was introduced to.'
				},
				{
					'number' : 14,
					'description' : ''
				},
				{
					'number' : 15,
					'description' : ''
				}
				
			]
		},
		'other_things' :  {
			'title' : 'other things',
			'size' : 4,
			'current' : 1,
			'images' :  [
				{	
					'number' : 1,
					'description' : 'I generally have an assortment of cheese/serving trays, bowls, and more... look up my <a href="http://www.etsy.com/people/downsworks?ref=si_pr" target="_blank">etsy page</a> for current offerings, or if you are in southern Wisconsin, drop in to either <a href="http://johnstongallery.com/potterystudio.htm" target="_blank">The Brewery Pottery Studio</a> in Mineral Point or <a href="http://centuryhouseinc.com" target="_blank">The Century House</a> in Madison. You can "like" downsworks on <a href="https://www.facebook.com/pages/Downsworks/204809039548603">Facebook</a>, as well.'  
				},			
				{
					'number' : 2,
					'description' : ''
				},
				{
					'number' : 3,
					'description' : ''
				},
				{
					'number' : 4,
					'description' : ''
				}
			]
		},
		'tables' : {
			'title' : 'tables',
			'size' : 13,
			'current' : 1,
			'images' : [
				{
					'number' : 1,
					'description' : 'These next tables are a few examples of the "dutch pullout", my favorite table design.'
				},
				{
					'number' : 2,
					'description' : 'I find this design to be simply elegant.'
				},
				{
					'number' : 3,
					'description' : "This table is a mashup of many pieces I admire, a boat's form extension table, the leaves can be removed to fit under the table along it's length."
				},
				{
					'number' : 4,
					'description' : "I'm very fond of the \"boat's form\" top, combined here with a trestle base...it offers some variation and elegance to a simple form. And.....people along a side have a bit more view of one another."
				},
				{
					'number' : 5,
					'description' : 'A better view of the trestle base.'
				},
				{
					'number' : 6,
					'description' : 'My first iteration of a trestle table...this live edge walnut table I designed with and built for dear friends.'
				},
				{
					'number' : 7,
					'description' : ''
				},
				{
					'number' : 8,
					'description' : ''
				},
				{
					'number' : 9,
					'description' : 'A simple "farmhouse" table in beech....unfortunately, the room is scarcely larger than the table.'
				},
				{
					'number' : 10,
					'description' : 'My deck furniture---walnut from the neighborhood combined with tops in a recycled resin. Walnut has terrific weather resistance properties. I\'ve finished it with tung oil, which is also a great oil for outdoor use.'
				},
				{
					'number' : 11,
					'description' : 'My deck bench moves indoors for the winter...here on display at The Century House.'
				},
				{
					'number' : 12,
					'description' : 'My writing table design--the task, to design as simple a table as I could, stable but not (visually) substantial....'
				},
				{
					'number' : 13,
					'description' : ''
				}
			]
		}
	}; 
	gal = $('#gallery').prop('class');
	function sliceGallery(index) {
		var num = Number(index);
		var upper= num+6;
		lower=num-6;
		if(num < 6)
		{
			if(gallery[gal].size > 12)
			{
				upper=12;
			}
			else
			{
				upper=gallery[gal].size;
			}
			lower=0;
		}
		if(num > gallery[gal].size - 6)
		{
			upper=gallery[gal].size
			if(gallery[gal].size > 12)
			{
				lower=gallery[gal].size - 12;
			}
			else
			{
				lower=0;
			}
		}
		slice = gallery[gal].images.slice(lower,upper);
		return slice;
	};

	function setImage(num) {
		var index = Number(num)
		if(index < 0)
		{
			index= gallery[gal].size - 1;
		}
		else if(index > gallery[gal].size -1)
		{
			index = 0;
		}
		var arr = sliceGallery(index);
		$('#image').empty();
		$('#image').addClass('loading');
		var img = new Image();
		var url = 'images/'  + gal + '/' + gallery[gal].images[index].number + '.jpg';
		$(img).load(function(e) {
			if($(this).data('index') == gallery[gal].current && $(this).data('cached') != 'true') {
				$('#image').removeClass('loading').html(this);
				$(this).fadeIn();
			}
			$(this).data('cached', 'true');
		}).attr('src', url).data('index',index);
		if($(img).data('cached') == 'true') 
		{
			$('#image').removeClass('loading').html(img);
			$(img).fadeIn();
		}
		$('#description').html(gallery[gal].images[index].description);
		var idx = index + 1;
		var string = idx + '/' + gallery[gal].size;
		$('#num').text(string);
		gallery[gal].current = index;
		$('#thumbnails li').remove();
		for(i in arr)
		{
			var  html = $('<li></li>');
			$(html).css('border-style','solid');
			$(html).css('border-width','1px');
			$(html).css('padding-right','1px');
			$(html).css('background-repeat','no-repeat');
			$(html).css('background-position','center center');
			$(html).css('background-image',  'url("images/' + gal + '/bw/'+ arr[i].number + '.jpg")');
			//alert('url("images/' + gal + '/bw/'+ arr[i].number + '.jpg")');
			$(html).data('number', arr[i].number -1);
			$(html).hover(
			function() {
				var pic = $(this).data('number') + 1;
				$(this).css('background-image',  'url("images/' + gal + '/thumbnails/'+ pic + '.jpg")');
			}, function() {
				var pic = $(this).data('number') +1;
				if(pic != index +1)
				{
					$(this).css('background-image',  'url("images/' + gal + '/bw/'+ pic + '.jpg")');
				}
			});
			if( $(html).data('number')  == index)
			{
				var pic = $(html).data('number') + 1;
				$(html).css('background-image',  'url("images/' + gal + '/thumbnails/'+ pic + '.jpg")');
				$(html).css('border-color','#DFE4E2');
			}
			
			$(html).css('width', 50);
			$(html).css('height',50);
			$(html).click(function() {
				setImage($(this).data().number);
			});
			$('#thumbnails ul').append(html);
		}
	};


	$('#left').click(function() {
		$('#image').empty();
		setImage(gallery[gal].current - 1);
	});
	$('#right').click(function() {
		setImage(gallery[gal].current + 1);
	});
	$(document).keydown(function(event) {
		if(event.keyCode == 37)
		{
			setImage(gallery[gal].current - 1);
		}
		if(event.keyCode == 39)
		{
			setImage(gallery[gal].current + 1)
		}
	});
	if(gallery[gal].size > 13)
	{
		for( i = 0; i < gallery[gal].size/2; i++)
		{
			$.preLoadImages( 'images/'  + gal + '/' + gallery[gal].images[i].number + '.jpg',  'images/' + gal + '/thumbnails/'+ gallery[gal].images[i].number + '.jpg', 'images/' + gal + '/bw/'+ gallery[gal].images[i].number + '.jpg');
			$.preLoadImages( 'images/'  + gal + '/' + gallery[gal].images[gallery[gal].size -1 - i].number + '.jpg',  'images/' + gal + '/thumbnails/'+ gallery[gal].images[gallery[gal].size -1 - i].number + '.jpg', 'images/' + gal + '/bw/'+ gallery[gal].images[gallery[gal].size  -1- i].number + '.jpg');
		}
	}
	else
	{
		for( i = 0; i < gallery[gal].size; i++)
		{
			$.preLoadImages( 'images/'  + gal + '/' + gallery[gal].images[i].number + '.jpg',  'images/' + gal + '/thumbnails/'+ gallery[gal].images[i].number + '.jpg', 'images/' + gal + '/bw/'+ gallery[gal].images[i].number + '.jpg');
		}
	}
	$('#category').text(gallery[gal].title);
	setImage(0);
	
});