$(document).ready(function(){
    (function(){
	var $bgWrap = $('<div id="bgWrap"/>').prependTo('body'),
	$bg = $('<div id="bg"/>').prependTo($bgWrap),
	imgWidth = 160,
	imgHeight = 95,
	imgTotal = photoArray.length,
	total = 0,
	tiles;
	
	function setBgSize(){
	    var bgWidth, bgHeight, timeout;
	    
	    //$bgWrap.css({height:0, width:0});//this shrinks the height of the wrapper so that it doesn't affect the height of the document.
	    
	    timeout = setTimeout(function(){
		bgWidth = $(document).width() - $(window).width() < 20 ? $(window).width() : $(document).width();
		bgHeight = $(document).height() - $(window).height() < 20 ? $(window).height() : $(document).height();
		$bgWrap.css({width:bgWidth, height:bgHeight, overflow:'hidden'});//this should be the same size as the document and it trims off the excess of the larger #bg element.
		$bg.css({width:bgWidth+imgWidth, height:bgHeight+imgHeight});
		
		//get the number of tiles:
		tiles = Math.ceil(bgWidth / imgWidth) * Math.ceil(bgHeight / imgHeight);
		
		//If the new wrapper size can hold more tiles, append them.
		//If it can't hold more, they'll just be trimmed off by the wrapper.
		if(tiles > total){
		    makeTiles(tiles - total);
		    total = tiles;
		}
	    }, 1);
	}
	
	//create the HTML for the tiles and append that to the bg element

	function makeTiles(count){
		var html = '', imgNum;
		while(count--){
		imgNum = Math.floor(Math.random()*imgTotal);
		html += "<div class='tile' style='background:url(public/images/portfolio/all/"+photoArray[imgNum]+".jpg) 0 0 no-repeat;' ><img style='opacity:0; filter:alpha(opacity=0);' src='public/images/portfolio/all/"+photoArray[imgNum]+"-c.jpg' alt=''/></div>\r";
		}		
		$bg.append(html);
	}
		
	setBgSize();

function slide(id){
    $.get('public/inc/inc-content.php', {id:id}, function(data){
        $('#feature').children().fadeTo('fast',0).parent().slideUp('slow', function(){
            $(this).html(data).slideDown('slow', setBgSize);
            $("#slider").easySlider();
            Shadowbox.setup();
            Cufon.refresh("h1");
        });
    });
}

var url = location.href.split('?id=').pop();
if(url == 'boulter-bowen'){
    slide('14');
} else if(url == 'wolf-cms'){
    slide('50');
} else if(url == 'creation-contractors'){
    slide('24');
} else if(url == 'ivis-tv'){
    slide('12');
} else if(url == 'lcs'){
    slide('13');
} else if(url == 'wolf-cms'){
    slide('50');
} else if(url == 'solo-property'){
    slide('18');
} else if(url == 'tool-mate'){
    slide('53');
} else if(url == 'blackdown-luxury-lettings'){
    slide('69');
}


//create the rollover event 
$('#bg img').live('mouseover', function(){
    $(this).fadeTo('normal', 1);
}).live('mouseout', function(){
    $(this).fadeTo('normal', 0);
}).live('click', function(){
    
    var id = $(this).attr('src').split('/').pop().replace('.jpg','');
    id = id.split('-')[0];
    
    slide(id);
});

	
	//resize the wrapper and bg element based on a browser resize
	function resize(){
	    $(window).one('resize.tile', function(){
		
		setBgSize();
		
		var timeout = setTimeout(resize, 5);
	    });
	}
	
	resize();
    }());

	$("#footer").slideBox();


});