function frame(proj, fno) {
	$('#' + proj + 'Box').find('.dots').each( function() {
		$(this).attr('src', 'images/dotGrey.png');
	});
	$('#' + proj + 'Box').find('.showcasenav').find('.dot' + fno).attr('src', 'images/dotGreen.png');
	$('#' + proj + 'Box').find('.projectimg img').attr('src', 'portfolio/' + proj + fno + '.png');
	$('#' + proj + 'Box').find('.projectimgfull img').attr('src', 'portfolio/' + proj + fno + '.png');
}

function slideshow(proj) {
	var projBox = proj;
	proj = proj.replace('Box', '');

	var projtitle = $('#' + proj + ' .projtitle').text();
	var projserv = $('#' + proj + ' .projserv').text();
	var projframe = $('#' + proj + ' .projframe').text();
	var projsite = $('#' + proj + ' .projsite').text();

	var doSlides = "$('#' + proj + 'Box').find('.projectimgfull').crossSlide({\n";
	doSlides += "sleep: 2,\n";
	doSlides += "fade: 1\n";
    doSlides += "}, [\n";
	for (i=1; i < parseInt(projframe); i++) {
		doSlides += "{ src: 'portfolio/" + proj + i + ".png', href: 'javascript:resize(&quot;" + projBox + "&quot;)' },\n";
	}
	doSlides += "{ src: 'portfolio/" + proj + i + ".png', href: 'javascript:resize(&quot;" + projBox + "&quot;)' }\n";
	doSlides += "])\n";
	eval(doSlides);
}

function resize(proj) {
	var projname = proj.replace('Box', '');
	var smallimg = "<a href=\"javascript:resize(\'" + projname + "Box\');\"><img src=\"portfolio/" + projname + "1.png\" /></a>";

	var boxclass = $('#' + proj).attr('class');
	if (boxclass.indexOf('showcasefull') >= 0) {
		$('#' + proj).removeClass('showcasefull').addClass('showcase');
		$('#' + proj + ' .projectimgfull').removeClass('projectimgfull').addClass('projectimg').html( smallimg );
		$('#' + proj + ' .boxservices').hide();
		$('#' + proj + ' .showcasenav').hide();
		$('#' + proj + ' .boxtitlefull').removeClass('boxtitlefull').addClass('boxtitle');
	} else {
		var curproj = $('.showcasefull').attr('id');
		if (curproj != null)
			resize(curproj);
		closebox(proj);
		showproject(projname);
		$('#' + proj).removeClass('showcase').addClass('showcasefull');
		$('#' + proj + ' .projectimg').removeClass('projectimg').addClass('projectimgfull');
		$('#' + proj + ' .boxservices').show();
		$('#' + proj + ' .showcasenav').show();
		$('#' + proj + ' .boxtitle').removeClass('boxtitle').addClass('boxtitlefull');
		slideshow(proj);
	}
}

function showproject(proj) {
	var projtitle = $('#' + proj + ' .projtitle').text();
	var projserv = $('#' + proj + ' .projserv').text();
	var projframe = $('#' + proj + ' .projframe').text();
	var projsite = $('#' + proj + ' .projsite').text();

	var box = '';
	box += '<div class="clearbox showcase" id="' + proj + 'Box">';
	box += '<div class="boxhdr">';
	box += '<div class="boxtitle">' + projtitle + '</div>';
	box += '<div class="boxcontrol"><a href="javascript:minimize(\'' + proj + 'Box\');"><img src="images/boxMinimize.png" alt="Minimize" /></a><a href="javascript:resize(\'' + proj + 'Box\');"><img src="images/boxResize.png" alt="Restore" /></a><a href="javascript:closebox(\'' + proj + 'Box\');"><img src="images/boxClose.png" alt="Close" /></a></div>';
	box += '<div class="clrall"></div>';
	box += '</div>';
	box += '<div class="clrall"></div>';
	box += '<div class="boxbody">';
	box += '<div class="boxservices">';
	if (projserv.indexOf('Design') >= 0)
		box += '<img src="images/iconDesign.png" alt="Design" /> ';
	if (projserv.indexOf('Build') >= 0)
		box += '<img src="images/iconBuild.png" alt="Build" /> ';
	if (projserv.indexOf('Manage') >= 0)
		box += '<img src="images/iconManage.png" alt="Manage" /> ';
	if (projserv.indexOf('Host') >= 0)
		box += '<img src="images/iconHost.png" alt="Host" />';
	box += '</div>';
	box += '<div class="showcasenav">Frame: <a href="javascript:frame(\'' + proj + '\', \'1\');"><img class="dots dot1" src="images/dotGreen.png" align="middle" alt="1" /></a> ';
	for (i=2; i <= parseInt(projframe); i++) {
		box += '<a href="javascript:frame(\'' + proj + '\', \'' + i + '\');"><img class="dots dot' + i + '" src="images/dotGrey.png" align="middle" alt="' + i + '" /></a> ';
	}
	if (projsite != "") {
		box += '<img src="images/iconVisitDiv.png" align="middle" /> <img src="images/iconVisit.png" align="middle" alt="Go" /> <a href="' + projsite + '" target="_blank">Visit Site</a>';
	}
	box += '</div><div class="clrall"></div><div class="projectimg"><a href="javascript:resize(\'' + proj + 'Box\');"><img src="portfolio/' + proj + '1.png" /></a></div></div>';
	box += '<div class="clrall"></div>';
	box += '<div class="boxftr">';
	box += '<div class="boxftrleft"></div>';
	box += '<div class="boxftrright"></div>';
	box += '<div class="clrall"></div>';
	box += '</div>';
	box += '<div class="clrall"></div>';
	box += '</div> ';
	
	$('#' + proj + 'Box').remove();
	$('#' + proj + 'BoxDock').remove();
//	$('.showcase').each( function() {
//		var boxid = $(this).attr('id');
//		if ($('#' + boxid).css('display') != 'none') {
//			minimize(boxid);
//		}
//	});
	var curproj = $('.showcasefull').attr('id');
	if (curproj != null)
		resize(curproj);
	$('#showcases').prepend( box );
	$('.showcase').draggable({ cursor: 'move', containment: '#wrapper', stack: { group: '#contents div', min: 1 } });
}

function viewproject(proj) {
	showproject(proj);
	resize(proj + 'Box');
}

function showlatest(proj, fno, projtitle, siteurl) {
	$('#latest').find('.dots').each( function() {
		$(this).attr('src', 'images/dotGrey.png');
	});
	$('#latest').find('.showcasenav').find('.dot' + fno).attr('src', 'images/dotGreen.png');
	$('#latest').find('.projectimg img').attr('src', 'portfolio/' + proj + '1.png');
	$('#latest').find('.projectimgfull img').attr('src', 'portfolio/' + proj + '1.png');
	$('#latest').find('.boxservices').text( projtitle );
	$('#siteurl').attr('href', 'http://www.' + siteurl);
}