var div				= null;
var backgroundDiv	= null;
var closeLink		= null;
var divOpen			= false;

function initProjectList(){
	var hasProjects = false;
	$('singer-project-list').select('li').each(function(el){
		el.onclick	= loadProject;
		el.addClassName('liscript');
		var a = el.select('a')[0].href;
		el.project = splitLink(a);
		hasProjects = true;
	});
	if(hasProjects){
		backgroundDiv = new Element('div', {'id': 'single-project-background', style: 'display:none;'});
		backgroundDiv.setOpacity(0);
		div = new Element('div', {'id': 'single-project-wrapper', style: 'display:none;'});
		div.setOpacity(0);
		backgroundDiv.onclick = closeProject;
		
		closeLink = new Element('a', {'id': 'close-project-link', 'href': '#'}).update('X');
		closeLink.onclick = closeProject;
		
		$$('body')[0].appendChild(backgroundDiv);
		$$('body')[0].appendChild(div);
	}
}
function loadProject(){
	if(divOpen === false){
		backgroundDiv.setStyle({display: 'block', width: getDocWidth()+'px', height: getDocHeight()+'px'});
		new Effect.Opacity(backgroundDiv,{duration: 0.8, from: 0, to: 0.8});
	} else{
		new Effect.Opacity(div, {
			duration: 0.8,
			from: 1,
			to: 0,
			queue: {position: 'front', scope: 'imagechange'},
			afterFinish: function(){
				if(div.newContent !== false){
					div.update(div.newContent);
					fadeInDiv();
				}
			}
		});
	}
	params		= {};
	params.cmd	= 'EXT:al_singer/pi1/class.tx_alsinger_pi1.php:tx_alsinger_pi1::generateImage';
	params.project 	= this.project.project;
	params.image 	= this.project.image;
	AJAX.request(params, projectLoaded.bind(this));
	return false;
}

function projectLoaded(ajax){
	if(ajax.result){
		if(!div.visible()){
			div.update(ajax.result);
			fadeInDiv();
		} else{
			div.newContent = ajax.result; 
		}
	}
}
function fadeInDiv(){
	div.newContent = false;
	div.appendChild(closeLink);
	positionProject({width: div.select('img')[0].width, height: div.select('img')[0].height});
	
	var prevLink = $('prev-link');
	var nextLink = $('next-link');
	new Effect.Opacity(
		div,{
			duration: 0.8,
			from: 0,
			to: 1,
			afterFinish: function(el){
				prevLink.project = splitLink(prevLink.href);
				nextLink.project = splitLink(nextLink.href);
				prevLink.onclick = loadProject;
				nextLink.onclick = loadProject;
				divOpen = true;
			},
			queue: {position: 'end', scope: 'imagechange'}
		}
	);
}

function positionProject(dim){
	var docHeight		= document.viewport.getHeight() - 40;
	var docWidth		= document.viewport.getWidth() - 40;
	var top				= 50;
	var left			= 50;
	var backPaddingTop	= 50;
	var backPaddingLeft	= 50;
	if(dim.height < docHeight){
		top = (docHeight / 2) - (dim.height / 2) + document.viewport.getScrollOffsets().top;
		backPaddingTop = 0;
	}
	if(dim.width < docWidth){
		left = (docWidth / 2) - (dim.width / 2);
		backPaddingLeft = 0;
	}
	
	div.setStyle({
		width: (dim.width + 20)+'px',
		left: left+'px',
		height: (dim.height + 20)+'px',
		top: top+'px',
		display: 'block'
	});
	
	backgroundDiv.setStyle({
		width: (getDocWidth() + backPaddingLeft)+'px',
		height: (getDocHeight() + backPaddingTop)+'px'
	});
}

function closeProject(){
	new Effect.Opacity(backgroundDiv,{duration: 0.8, from: 0.8, to: 0, afterFinish: function(el){backgroundDiv.setStyle({display: 'none'})}});
	new Effect.Opacity(div, {duration: 0.8, from: 1, to: 0, afterFinish: function(el){div.setStyle({display: 'none'});divOpen = false;}});
	return false;
}
function splitLink(ref){
	var projectUid	= ref.split('project')[1].split('=')[1].split('&')[0];
	var imageUidRaw	= ref.split('image')[1];
	var imageUid = 0;
	if(imageUidRaw){
		imageUid = imageUidRaw.split('=')[1].split('&')[0];
	}
	return {project: projectUid, image: imageUid};
}

function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}
function getDocWidth() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
        Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
        Math.max(D.body.clientWidth, D.documentElement.clientWidth)
    );
}
/*function calculateOffset(){
	var offset = 0;
	if(window.pageYOffset){
		offset = window.pageYOffset;
	} else if(document.documentElement.scrollTop){
		offset = document.documentElement.scrollTop;
	} else if(document.body.scrollTop){
		offset = document.body.scrollTop;
	}
	return offset;
}*/
document.observe('dom:loaded', function(){
	initProjectList();
});