var exObj = {};
$.getJSON('/js/examples.json', function(json){
	exObj = json;
});

// Set up the #examples area to accept and display the XML data
$('#examples, #exampleList, #exampleContent').addClass('changed');
$('#exampleContent').append($('#examples'));
$('#exampleContent').append($('#exampleList'));
$('#inner-wrap').html('<div id="left"><h3></h3><div id="desc"></div></div><img src="./img/default.png" id="main" />');

// Show the #container again; Expand the content to the exact page height
$('#container').css("display","block");
if($('#background').height() < $(window).height()) { $('#background').height($(window).height() - 20 + "px"); }

// Expand/collapse functionality
$('#examples').click(function() {
	if($(this).text() == "Hide Examples") {
		$(this).text("Show Examples").css("outline","none");
		$('#outer-wrap').animate({ 
			height: "0", 
			opacity : 0 }, 
		500);
		return false;
	} else {
		$(this).text("Hide Examples").css("outline","none");
		$('#outer-wrap').animate({ 
			height: "480px", 
			opacity : 1 }, 
		500);
		return false;
	}
});

$('#exampleList li a').click(function() {
	$(this).css("outline","none");
	if($('#outer-wrap').height() == '0') {
		$('#outer-wrap').animate({ 
			height: "480px", 
			opacity : 1 }, 
		500);
		$('#examples').text("Hide Examples");
	};
	var tempIndex = parseFloat($(this).html()) - 1;
	$('#inner-wrap').hide()
	.html('<div id="left"><h3>' 
		+ exObj.examples[tempIndex].projName 
		+ '</h3><div id="desc">' 
		+ exObj.examples[tempIndex].projDesc 
		+ '</div></div><img src="' 
		+ exObj.examples[tempIndex].projImg 
		+ '" id="main" />')
	.fadeIn(1500);
	setupCurrentState(tempIndex);
	return false;
});

var setupCurrentState = function(index) {
	$('#exampleList li a').removeClass();
	$('#exampleList li a').eq(index).addClass('current');
}

var din = { src: '/js/din.swf', ratios: [8, 1.42, 9, 1.33, 12, 1.35, 15, 1.3, 19, 1.28, 27, 1.27, 28, 1.25, 32, 1.26, 33, 1.24, 34, 1.25, 48, 1.24, 52, 1.23, 53, 1.24, 73, 1.23, 76, 1.22, 77, 1.23, 81, 1.22, 82, 1.23, 1.22]};
sIFR.activate(din);
sIFR.replace(din, { selector: 'h1', wmode: 'transparent', css: '.sIFR-root { color: #FFFFFF; }, strong { color: #CCCCCC; opacity: 40; }' });
sIFR.replace(din, { selector: '#content h2', wmode: 'transparent', css: '.sIFR-root { color: #FFFFFF; opacity: 40; letter-spacing: 2.2; }' });
sIFR.replace(din, { selector: '#contact h2', wmode: 'transparent', css: '.sIFR-root { color: #FFFFFF; text-align: right; }' });
sIFR.replace(din, { selector: 'p.phone', wmode: 'transparent', css: '.sIFR-root { color: #FFFFFF; opacity: 75; text-align: right; }' });