var speed = 750;
var pDiv, pHeight, pWidth, newP, scroll, scroll2; 
var addLeft = 0, addRight = 0, addTop = 0, addBottom = 0;
var eLeft = new Array();
var eTop = new Array();
var eWidth = new Array();
var eHeight = new Array();
var eImageWidth = new Array();
var eImageHeight = new Array();
var eImageTop = new Array();
var expanders = 0;
var scrollActive = false;
function createExpander(parentDiv) 
{
	pDiv = $(parentDiv);
	pDiv.style.position = "relative";
	pDiv.style.overflow = "hidden";
	pHeight = pDiv.offsetHeight;
	pWidth = pDiv.offsetWidth;
	newP = document.createElement('div');
	newP.id ='scrollbox';
	pDiv.appendChild(newP);
	newP.style.position = 'relative';
	newP.style.width = (pWidth+addRight-addLeft+20)+'px';
	newP.style.height = (pHeight+addBottom-addTop+20)+'px';
	newP.style.visibility = "hidden";
	pDiv.scrollLeft = 0 - addLeft + 10;
	pDiv.scrollTop = 0 - addTop + 10;
	newP.style.background = "url(images/concretebackground.jpg) "+(0 - addLeft + 10)+"px "+(0 - addTop + 10)+"px repeat";
	
	scroll = new Scroller(parentDiv, {area: 100, velocity: .2}); 
	scroll2 = new Scroller(parentDiv, {area: 100, velocity: .5}); 
	$('content-wrap').addEvent('mousedown', function() {
		if(currentSection==0 && scrollActive)
			scroll2.start();
	});
	$('content-wrap').addEvent('mouseup', function() {
		scroll2.stop();
	});
	$('work-back').addEvent('mouseover', function() {
		if(currentSection==0 && scrollActive)
			scroll.start();
	});
	$('content-wrap').addEvent('mouseleave', function() {
		scroll.stop();
	});
}

var currentSection = 0;
var oldCurrent = 0;
var change;
var action = new Array();
var actionImage = new Array();
var newLeft = new Array();
var newTop = new Array();
function createActions(idNum)
{
	action[idNum] = new Fx.Morph('expander'+idNum, {wait: false, duration: speed});
	actionImage[idNum] = new Fx.Morph('expanderImage'+idNum, {wait: false, duration: speed});
}
function getNewLoc(idNum,sectTop,sectLeft)
{
	var leftPer = (($('expander'+idNum).offsetLeft + ($('expander'+idNum).offsetWidth / 2)) - ($('expander'+currentSection).offsetLeft + ($('expander'+currentSection).offsetWidth / 2))) / ($('expander'+currentSection).offsetWidth / 2);
	var topPer = (($('expander'+idNum).offsetTop + ($('expander'+idNum).offsetHeight / 2)) - ($('expander'+currentSection).offsetTop + ($('expander'+currentSection).offsetHeight / 2))) / ($('expander'+currentSection).offsetHeight / 2);

	
	if((($('expander'+idNum).offsetLeft) + ($('expander'+idNum).offsetWidth / 2)) < ($('expander'+currentSection).offsetLeft + ($('expander'+currentSection).offsetWidth / 2)))
	{
			newLeft[idNum] = ((sectLeft - $('expander'+idNum).offsetWidth + 50) + (leftPer * $('expander'+idNum).offsetWidth));
	}
	else if((($('expander'+idNum).offsetLeft) + ($('expander'+idNum).offsetWidth / 2)) > ($('expander'+currentSection).offsetLeft + ($('expander'+currentSection).offsetWidth / 2)))
	{
			newLeft[idNum] = ((sectLeft + (pWidth-30) - 50) + (leftPer * $('expander'+idNum).offsetWidth));
	}
	else 
		newLeft[idNum] = $('expander'+idNum).offsetLeft;
	if((($('expander'+idNum).offsetTop + ($('expander'+idNum).offsetHeight / 2))) < ($('expander'+currentSection).offsetTop + ($('expander'+currentSection).offsetHeight / 2)))
	{
			newTop[idNum] = ((sectTop - $('expander'+idNum).offsetHeight + 30) + (topPer * $('expander'+idNum).offsetHeight));
	}
	else if((($('expander'+idNum).offsetTop + ($('expander'+idNum).offsetHeight / 2))) > ($('expander'+currentSection).offsetTop + ($('expander'+currentSection).offsetHeight / 2)))
	{
			newTop[idNum] = ((sectTop + (pHeight-30) - 30) + (topPer * $('expander'+idNum).offsetHeight));
	}
	else
		newTop[idNum] = $('expander'+idNum).offsetTop;
	action[idNum].start({
		top: newTop[idNum]+'px',
		left: newLeft[idNum]+'px'
	});
}
function resetLocs(idNum)
{
	$('expanderText'+idNum).fade('hide');
	action[idNum].start({
		width: eWidth[idNum]+'px',
		height: eHeight[idNum]+'px',
		top: eTop[idNum]+'px',
		left: eLeft[idNum]+'px'
	});
	actionImage[idNum].start({
		width: eWidth[idNum]+'px',
		height: eHeight[idNum]+'px',
		marginTop: '0px'
	});
}
function clickAction(idNum)
{
	if(currentSection != 0)
	{
		for(y=1;y<=expanders;y++)
			resetLocs(y);
		oldCurrent = idNum;
		$clear(change);
		change = changeExpand.delay(speed);
	}
	else {
		if(scrollActive)
		{
			scroll.stop();
			scroll2.stop();
		}
		currentSection = idNum;
		var changeTop = pDiv.scrollTop + 15;
		var changeLeft = pDiv.scrollLeft + 15;
		var topLocation = $('expander'+idNum).offsetTop + ($('expander'+idNum).offsetHeight / 2);
		var leftLocation = $('expander'+idNum).offsetLeft + ($('expander'+idNum).offsetWidth / 2);
		for(y=1;y<=expanders;y++)
		{
			if(y!=idNum)
				getNewLoc(y,changeTop,changeLeft);
		}
		action[idNum].start({
			width: (pWidth-30)+'px',
			height:(pHeight-30)+'px',
			top: changeTop+'px',
			left: changeLeft+'px'
		});
		$('expanderText'+idNum).fade('hide');
		actionImage[idNum].start({
			width: eImageWidth[idNum]+'px',
			height: eImageHeight[idNum]+'px',
			marginTop: eImageTop[idNum]+'px'
		}).chain(function(e){
			$('expanderText'+idNum).fade(1);
		});
	}
}
function createClick(idNum)
{
	var currentZ;
	$('expanderImage'+idNum).addEvent('click', function(e) {
		e.stop();
		clickAction(idNum);
	});
	$('expander'+idNum).addEvent('mouseenter', function(e) {
		e.stop();
		if(currentSection == 0)
		{
			if($('expander'+idNum).style.zIndex < 10000)
				currentZ = $('expander'+idNum).style.zIndex;
			$('expander'+idNum).style.zIndex = 10000;
		}
	});
	$('expander'+idNum).addEvent('mouseleave', function(e) {
		e.stop();
		if(currentSection == 0)
			$('expander'+idNum).style.zIndex = currentZ;
	});
}
var changeExpand = function () {
	if(oldCurrent != currentSection)
	{
		currentSection = 0;
		clickAction(oldCurrent);
	}
	else 
	{
		currentSection = 0;
		if(scrollActive)
		{
			scroll.start();
			scroll2.start();
		}
	}
}
function endExpander()
{
	if($('work-back').getAttribute('rel') != "stopExpand")
	{
		for(x=1;x<=expanders;x++)
			createActions(x);
		for(x=1;x<=expanders;x++)
			createClick(x);
	}
}
function getStyle(idNum)
{
	if($("expanderText"+idNum).offsetWidth != 815 && $("expanderText"+idNum).offsetWidth != 835) 
	{
		var newTextTop = (pHeight - $("expanderText"+idNum).offsetHeight - 30) / 2;
		$("expanderText"+idNum).style.margin = newTextTop + "px 10px 0px 10px";
		eImageTop[idNum] = (pHeight - $("expander"+idNum).offsetHeight - 30) / 2;
	}
	else
		eImageTop[idNum] = 0;
	eLeft[idNum] = $("expander"+idNum).offsetLeft - addLeft + 10;
	eTop[idNum] = $("expander"+idNum).offsetTop - addTop + 10;
	eImageWidth[idNum] = $("expander"+idNum).offsetWidth;
	eImageHeight[idNum] = $("expander"+idNum).offsetHeight;
	eWidth[idNum] = $("expanderImage"+idNum).offsetWidth;
	eHeight[idNum] = $("expanderImage"+idNum).offsetHeight;
	newP.appendChild($("expander"+idNum));
	$("expander"+idNum).style.left = eLeft[idNum] + "px";
	$("expander"+idNum).style.top = eTop[idNum] + "px";
	$("expander"+idNum).style.width = eWidth[idNum] + "px";
	$("expander"+idNum).style.height = eHeight[idNum] + "px";
	$("expander"+idNum).style.visibility = "visible";
}
var startExpanders = function () {
	createExpander('work-back');
	for(z=1;z<=expanders;z++)
		getStyle(z);
	endExpander();
	$('scrollbox').fade('hide');
	$('scrollbox').fade(1);
}
var slideOff = function () {
	clickDir2.start({
		top: '761px'
	});
}
var fading = function () {
	$('clickboxcover').fade(0);
}
var destroyBoxes = function () {
	$('clickbox').dispose();
}
function createIntro() {
//	clickDir = new Fx.Morph('clickboxcover', {wait: false, duration: 500});
	clickDir2 = new Fx.Morph('clickbox', {wait: false, duration: 2000});
	clickDir3 = new Fx.Morph('clickbox', {
	wait: false,
	duration: 750,	
	transition: Fx.Transitions.Bounce.easeOut

	});
//	$('clickboxcover').fade('show');
	$('clickbox').fade('show');
//	clickDir.start({
//		top: 265 + 'px'
//	});
	clickDir3.start({
		top: 325 + 'px'
	}).chain(function() {
//		fading.delay(750);
		slideOff.delay(2750);
		destroyBoxes.delay(4500);
		startExpanders.delay(3500);
	});
}
window.addEvent('load', function() {
	$$('.expandable').each(function(exp){
		expanders++;
	});
	for(z=1;z<=expanders;z++)
	{
		if(($("expander"+z).offsetLeft < 0) || (($("expander"+z).offsetLeft + $("expanderImage"+z).offsetWidth) > $('work-back').offsetWidth) || ($("expander"+z).offsetTop < 0) || (($("expander"+z).offsetTop + $("expanderImage"+z).offsetHeight) > $('work-back').offsetHeight))
		{
			if(($("expander"+z).offsetLeft < 0) && ($("expander"+z).offsetLeft < addLeft))
				addLeft = $("expander"+z).offsetLeft;
			if((($("expander"+z).offsetLeft + $("expanderImage"+z).offsetWidth) > $('work-back').offsetWidth) && (($("expander"+z).offsetLeft + $("expanderImage"+z).offsetWidth) - $('work-back').offsetWidth) > addRight)
				addRight = ($("expander"+z).offsetLeft + $("expanderImage"+z).offsetWidth) - $('work-back').offsetWidth;
			if(($("expander"+z).offsetTop < 0) && ($("expander"+z).offsetTop < addTop))
				addTop = $("expander"+z).offsetTop;
			if((($("expander"+z).offsetTop + $("expanderImage"+z).offsetHeight) > $('work-back').offsetHeight) && (($("expander"+z).offsetTop + $("expanderImage"+z).offsetHeight) - $('work-back').offsetHeight) > addBottom)
				addBottom = ($("expander"+z).offsetTop + $("expanderImage"+z).offsetHeight) - $('work-back').offsetHeight;
			scrollActive = true;
		}
	}
	$('clickboxcover').dispose();
	$('clickbox').dispose();
//	if(scrollActive)
//		createIntro();
//	else
//	{
		startExpanders.delay(0);
//		destroyBoxes.delay(0);
//	}
});