/* Set serviceMode to true to create your own shapes: */
var serviceMode = false;

$(document).ready(function(){
	

	var str=[];
	var perRow = 32;
	
	
	
	for(var i=0;i<384;i++)
	{
		str.push('<div class="dot" id="d-'+i+'" />');
	}
	
	
	
	$('#stage').html(str.join(''));
	

	$('#navigation li a').hover(function(e){
	
		
		
		if(serviceMode)
			serviceDraw($(this).attr('class'));
		else
			draw($(this).attr('class'));
	}, function(e){
		
	});
	
	
	dots = $('.dot');
	
	if(serviceMode)
	{
	
		
		dots.css({
			border:'1px solid black',
			width:dots.eq(0).width()-2,
			height:dots.eq(0).height()-2,
			cursor:'pointer'
		})
		
		$('<div/>').css({
			position:'absolute',
			bottom:-20,
			right:0
		}).html('<a href="" onclick="outputString();return false;">[Export Shape]</a>').appendTo('#stage');
		
		dots.click(function(){
			$(this).toggleClass('active');
		});
	}
	
});

var shapes={
	
	
	
	house:[91,116,117,118,141,142,143,144,145,166,167,168,169,170,171,172,191,192,193,194,195,196,197,198,199,218,219,223,224,244,245,249,250,270,271,273,274,275,276,296,297,299,300,301,302],
	wrench:[87,88,89,90,113,114,115,116,117,139,140,141,142,143,144,165,166,167,168,169,170,171,192,193,194,195,196,197,198,217,218,219,220,221,222,223,242,243,244,245,246,247,248,267,268,269,270,273,292,293,294,295,318,319,320,345],
	envelope:[111,112,113,114,115,116,117,118,119,120,121,122,137,138,139,146,147,148,163,165,166,171,172,174,189,192,193,196,197,200,215,219,220,221,222,226,241,246,247,252,267,268,269,270,271,272,273,274,275,276,277,278],
	info:[90,91,116,117,167,168,169,194,195,220,221,246,247,272,273,274]
}

var stopCounter = 0;
var dots;

function draw(shape)
{
	
	stopCounter++;
	var currentCounter = stopCounter;

	dots.removeClass('active').css('opacity',0);
	
	$.each(shapes[shape],function(i,j){
		setTimeout(function(){
							
		
			if(currentCounter!=stopCounter) return false;
			
			dots.eq(j).addClass('active').fadeTo('slow',0.4);
			
		
		},10*i);

	});
}

function serviceDraw(shape)
{
	
	
	dots.removeClass('active');
	
	$.each(shapes[shape],function(i,j){
		dots.eq(j).addClass('active');
	});
}

function outputString()
{
	
	
	var str=[];
	$('.dot.active').each(function(){
		
		str.push(this.id.replace('d-',''));
	})
	
	prompt('Insert this string as an array in the shapes object',str.join(','));
}





$(document).ready(function(){
	
	$('.nav a,.footer a.up').click(function(e){
										  
		
		
		$.scrollTo( this.hash || 0, 1500);
		e.preventDefault();
	});

});