/* Note: The variable scope in this file is pretty much all global, and that is *okay* */

var leftOffset = 0;
var topOffset = 0;
var maxTopOffset = 0;
var numProjectRows = 0;
var limitations = $H();
var squares = null;
    
function loadText(){
   	rows = $$('.project_images');
   	currentRow = Math.abs(topOffset/600);
	selectSquare(currentRow);
   	currentColumn = Math.abs(leftOffset/810);
  	currentImage = rows[currentRow].down('img', currentColumn) || rows[currentRow].down('.frame', currentColumn);
    
	if (currentImage.readAttribute('top') == undefined){
			currentImage.writeAttribute('top', 100);
	} 
	
	if (currentImage.readAttribute('left') == undefined){
		currentImage.writeAttribute('left', 240);
	}
	
	$('description').fade({
    	duration: .25,
		afterFinish: function(){
			if (currentImage == undefined || currentImage.readAttribute('data-description') == undefined){
				return false;  	
			} else {
				$('description_text').update(currentImage.readAttribute('data-description'));
				$('description').style.marginTop = currentImage.readAttribute('top') + "px";
				$('description').style.marginLeft = currentImage.readAttribute('left') + "px";


				if (currentImage.readAttribute("data-title") == undefined){
					$('description_title').hide();
				} else {
					$('description_title').update(currentImage.readAttribute('data-title'));
					$('description_title').show();
				}		
				$('description').appear({duration:.25});
			}
		}
	});



/*	$('description').morph('margin-top:' + currentImage.readAttribute('top') + 'px; margin-left:' + currentImage.readAttribute('left') + "px;", {
		duration:.25,
		beforeSetup: function(){
			if (currentImage.readAttribute('title') == undefined){
				$('description_title').fade({
					duration:.2
				});
			} else {
		 		$('description_title').appear({
			duration:.2	});
			}
		},
		afterFinish: function(){
			$('description_title').update(currentImage.readAttribute('title'));
			$('description_text').update(currentImage.readAttribute('description'));
		}

	});*/

	  
}


function moveDown(){
	if (topOffset >= 0){
	} else {
		returnLeft(topOffset);
		topOffset += 600;
		$('project-0').morph('margin-top:' + topOffset + "px;", {
			afterFinish: loadText
		});
	}
}

function moveUpDown(number){
	returnLeft(topOffset);
	topOffset = number * -600;
	$('project-0').morph('margin-top:' + topOffset + "px;", {
		afterFinish: loadText
	});
}

function selectSquare(number){
	squares.each(function(s){
		if (s != squares[number]){
		s.morph('background-color:#444;width:40px;', {duration: .25});
		}else{
			s.morph('background-color:#999;width:60px;', {duration: .25});
		}
	});
}

function returnLeft(_row){
	leftOffset = 0;
	$('project-'+_row).morph('margin-left:0px;');
}

function returnToOrigin(_current_row){
	returnLeft(_current_row);
	$('project-0').morph('margin-top:0px;');
	topOffset = 0;
}


function moveLeft(){
	leftOffset -= 810;
	if (leftOffset <= limitations.get(topOffset)){
		returnLeft(topOffset);
	} else {
		$('project-'+topOffset).morph('margin-left:' + leftOffset + "px;", {
			afterFinish: loadText
		});
	}
}

function moveRight(){
	if (leftOffset >= 0){
		
	} else {
		leftOffset += 810;
		
		$('project-'+topOffset).morph('margin-left:' + leftOffset + "px;", {
			afterFinish: loadText
		});
	}
}

function moveUp(){
	topOffset -= 600;
	if (topOffset <= maxTopOffset){
		returnToOrigin(topOffset+600);
	} else {
		returnLeft(topOffset+600);
		$('project-0').morph('margin-top:' + topOffset + "px;", {
			afterFinish: loadText
		});
	}
}

function initScrollSystem(){
	_projects = $('project_pane').childElements();
	numProjectRows = _projects.size();
	maxTopOffset = -600 * numProjectRows;
	
	_projects.each(function(s, i){
		height = i * -600;
		width = s.childElements().size() * -810;
		limitations.set(height, width);
		li = new Element('li');
		li.observe('click', function(){
			moveUpDown(i);
		});
		$('project_selector').down().insert({bottom:li});
	});
	
	$('header').fire('projects:ready');	
}
	
	


document.observe("dom:loaded", function() {
	
	$('header').observe('projects:ready', function(){
		this.stopObserving('projects:ready');
		
		squares = $('project_selector').down().childElements();
	    loadText();
		
		$('moveLeft').observe('click', moveLeft);

		$('moveRight').observe('click', moveRight);

		$('moveUp').observe('click', moveUp);

		$('moveDown').observe('click', moveDown);


			document.observe('keyup', function(e){
				switch(e.keyCode){
					case Event.KEY_DOWN:
						moveUp();
						break;
					case Event.KEY_UP:
						moveDown();
						break;
					case Event.KEY_RIGHT:
						moveLeft();
						break;
					case Event.KEY_LEFT:
						moveRight();
						break;
					}
			});	
	});	
	initScrollSystem();
	
});