var storeElement = '';
var image = new Image();
image.onload = function() {
	continueLoading( image.src );
}
var right = false;

function continueInit() {
	// variables
	var iheight = 80;
	var iwidth = 80;
	
	var interval = 3;
	var padding = 27;
	var top = padding;
	var left = padding;
	
	for( var x = 0; x<array.length; x++ ) {
		d = createInitImage( x );
		// margin this correctly !relative! to the gallery
		d.style.top = $('gallery').offsetTop + top + 'px';
		d.style.left = $('gallery').offsetLeft + left + 'px';
		
		// store this won't ya?
		d.originalTop = d.offsetTop;
		d.originalLeft = d.offsetLeft;
		
		// add the imageheight + interval
		// so it balances out correctly
		top = top + iheight + interval;
		if( top > ( ( interval + iheight + padding ) * 3 ) ) {
			top = 0 + padding;
			left = left + iwidth + interval;
		}
	}
	
	// screw this...............the border seems unbalanced at all times
	$('gallery').style.border = 'none';
	$('preview').style.border = 'none';
	// interval + imageheight multipled by four images
	// padding twice for top and bottom [left,right]
	// subtract 2px for the top and bottom borders [left,right]
	// && marginRight to balance it out correctly. majorly needed
//	$('gallery').style.height = ( ( ( interval + iheight ) * 4 ) + ( padding * 2 ) ) - 2 + 'px';
//	$('gallery').style.marginRight = $('gallery').offsetWidth - ( ( ( ( interval + iwidth ) * 4 ) + ( padding * 2 ) ) ) + 20 + 'px';
//	$('gallery').style.width = ( ( ( interval + iwidth ) * 4 ) + ( padding * 2 ) ) - 2 + 'px';
	
	$$('#gallery .img').each(
		function( e ) {
			e.addEvent( 'click', function() {
				moveElement( e );
				startLoading();
			} );
		}
	);
}

function createInitImage( x ) {
	var d = document.createElement( 'div' );
	d.style.position = 'absolute';
	d.id = 'img' + x;
	d.className = 'img';
	d.innerHTML = '<a href="#img-' + x + '"><img src="thumb/' + array[x] + '" class="imageInside" /></a>';
	
	return document.body.getElementById('gallery').appendChild( d );
}

function moveElement( e ) {
	// make sure that theres no stored elements
	if( storeElement != '' ) {
		var a = storeElement;
		new Fx.Styles( a ).start( {
			'opacity': 1,
			'top': a.originalTop,
			'left': a.originalLeft
		} );
		
		if( e.id.replace('img', '').toInt() > a.id.replace('img', '').toInt() ) {
			right = false;
		} else {
			right = true;
		}
	}
	
	var top = $('preview').offsetTop + ( ( $('preview').offsetHeight - e.offsetHeight ) / 2 );
	var left = $('preview').offsetLeft + ( ( $('preview').offsetWidth - e.offsetWidth ) / 2 );
//	e.originalTop = e.offsetTop;
//	e.originalLeft = e.offsetLeft;
	storeElement = e;

	new Fx.Styles( e ).start( {
		'opacity': 0,
		'top': top,
		'left': left
	} );
	
	cacheUp( e );
}

function cacheUp( e ) {
	// load the image on the side
	var element = e.getElementsByClassName('imageInside');
	loadImage = element[0].src.replace('thumb/', 'full/');
	
//	loadImage = e.innerHTML.replace('thumb/', 'full/').replace('<a href="#"><img src="', '').replace('"></a>', '' );
	
	image.src = loadImage;
}

function continueLoading( src ) {
	if( !$('info') ) {
		var d = document.createElement('div');
		d.toBewidth = ( $('preview').offsetWidth - 20 ) + 'px';
		d.toBeheight = ( $('preview').offsetHeight - 20 ) + 'px';
		d.style.border = 'solid 1px #000000';
		d.style.overflow = 'hidden';

		d.style.position = 'absolute';
		d.startTop = $('preview').offsetTop + ( $('preview').offsetHeight / 2 );
		d.startLeft = $('preview').offsetLeft + ( $('preview').offsetWidth / 2 );
		d.style.top = d.startTop + 'px'
		d.style.left = d.startLeft + 'px';
		
		d.id = 'info';

		d = document.body.getElementById('preview').appendChild( d );

		new Fx.Styles( d, {onComplete: function() {
			d.style.margin = 'auto';
			d.style.marginTop = '8px';
			d.style.position = '';
			d.style.zIndex = 1000;
			importImage( src, false );
		} }).start( {
			top: $('preview').offsetTop + 9,
			left: $('preview').offsetLeft + 9,
			width: $(d).toBewidth,
			height: $(d).toBeheight,
			opacity: [0,1]
		} );
	} else {
		TransitionImage( src );
	}
}

function importImage( src, moveOn ) {
	$('info').innerHTML = '<img src="' + src + '" id="image" style="position:relative;" />';
	$('image').makeDraggable({limit:{x:[- + ( $('image').width - $('info').offsetWidth ),0],y:[$('info').offsetHeight-$('image').height,0]}});
	
	if( moveOn ) {
		new Fx.Styles( 'info', {onComplete: function() {
			genMenus( src );
			new Fx.Styles( 'image', {transition:Fx.Transitions.Back.easeOut} ).start( {
				'left': - + ( ( image.width - $('info').offsetWidth ) / 2 ),
				'top': - + ( ( image.height - $('info').offsetHeight ) / 2 )
			} );
		},transition:Fx.Transitions.Back.easeOut}).start( {
			'marginLeft': 0
		} );
	} else {
		genMenus( src );
		new Fx.Style( 'info', 'borderColor', {onComplete: function() {
			new Fx.Styles( 'image', {transition:Fx.Transitions.Back.easeOut} ).start( {
				'left': - + ( ( image.width - $('info').offsetWidth ) / 2 ),
				'top': - + ( ( image.height - $('info').offsetHeight ) / 2 )
			} );
		} }).start('#000000', '#FFFFFF');
	}
}

function genMenus( src ) {
	if( document.getElementById('menu') ) {
		document.body.getElementById('info').removeChild( document.getElementById('menu') );
	}
	
	var d = document.createElement('div');
	d.style.position = 'relative';
//	d.toBeTop = - + ( $('image').offsetHeight - ( ( $('preview').offsetWidth - 20 ) - $('info').offsetWidth ) ) + 'px';
	d.toBeTop = - + $('image').offsetHeight + 10 + 'px';
//	d.style.left = '0px';
//	d.style.top = $('info').offsetTop + $('info').offsetHeight - 100 + 'px';
//	d.style.left = $('info').offsetLeft + 'px';
//	d.style.height = $('info').offsetWidth + 'px';
//	d.style.width = '25px';
//	d.style.backgroundColor = '#FFFFFF';
	d.style.opacity = '0.7';
	d.id = 'menu';
	d.innerHTML = '<center><a href="javascript:moreInformation();" id="infoLink"><img src="info.gif" /></a><br /><a href="javascript:closeBox();"><img src="close.gif" /></a><br /><a href="javascript:loadPrev();"><img src="prev.gif" /></a><br /><a href="javascript:loadNext();"><img src="next.gif" /></a></center>';
//	d.innerHTML = '<div style="float:left;padding-left:20px;" id="menu_left"><a href="javascript:moreInformation();">More Info</a></div><div style="float:right;padding-right:20px;"><a href="javascript:closeUp();">Close</a></div><div style="clear:both;"></div>';
	
	document.body.getElementById('info').appendChild( d );
	
	new Fx.Style( 'menu', 'top', {transition:Fx.Transitions.Back.easeOut,onComplete:loaded} ).start($('menu').toBeTop);
}

function TransitionImage( src ) {
	if( right ) {
		$('info').saveMarginLeft = $('preview').offsetLeft - $('info').offsetLeft;
		$('info').style.marginLeft = $('info').saveMarginLeft + 'px';
		new Fx.Styles( 'info', {onComplete: function() {
			$('info').style.marginLeft = - + $('info').offsetWidth + 20 + 'px';
			importImage( src, true );
		},transition:Fx.Transitions.Back.easeIn}).start({
			marginLeft: $('info').offsetWidth + 'px'
		} );
	} else {
		$('info').saveMarginLeft = $('preview').offsetLeft - $('info').offsetLeft;
		$('info').style.marginLeft = $('info').saveMarginLeft + 'px';
		new Fx.Styles( 'info', {onComplete: function() {
			$('info').style.marginLeft = $('info').offsetWidth + 20 + 'px';
			importImage( src, true );
		},transition:Fx.Transitions.Back.easeIn}).start({
			marginLeft: - + $('info').offsetWidth + 'px'
		} );
	}
}

function closeBox() {
	$('info').innerHTML = '';
	var a = storeElement;
	new Fx.Styles( a ).start( {
		'opacity': 1,
		'top': a.originalTop,
		'left': a.originalLeft
	} );
	storeElement = '';
	
	new Fx.Style( 'info', 'borderColor', {onComplete: function() {
		$('info').style.position = 'absolute';
		new Fx.Styles( 'info', {onComplete: function() {
			document.body.getElementById('preview').removeChild( document.getElementById('info') );
		} }).start( {
			'top': $('preview').offsetTop + ( $('preview').offsetHeight / 2 ),
			'left': $('preview').offsetLeft + ( $('preview').offsetWidth / 2 ),
			'height': 0,
			'width': 0
		} );
	},duration:250 }).start('#FFFFFF', '#000000');
}

function moreInformation() {
	startLoading();
	
	alert( storeElement.id );
/*
	new Fx.Styles( 'menu', {onComplete: function() {
		var build = '';
		for( var x = 0; x<=5; x++ ) {
			build = build + x + '<br />';
		}

		$('menu').innerHTML = '<div id="menu_more_info">' + build + '</div>' + $('menu').innerHTML;
		$('menu').style.height = '';
		new Fx.Styles( 'menu', {transition:Fx.Transitions.Back.easeOut} ).start({
			'top':- + ( $('image').offsetHeight - ( ( $('preview').offsetWidth - 20 ) - $('menu').offsetHeight ) ) + 'px'
		});
	} }).start( {
		'top': 0
	} );

	new Fx.Styles( 'menu', {onComplete: function() {
		new Ajax( 'request.php', {update:'menu',onComplete: function() {
			new Fx.Styles( 'menu' ).start( {
				'width': $('menu').offsetWidth,
				'left': '0px'
			} );
		} }).request();
	} }).start( {
		'left': - + $('preview').offsetWidth + 'px'
	} );
*/
	var d = document.createElement('div');
	d.toBeLeft = $('menu').offsetWidth + 10 + 'px';
	d.toBeTop = $('menu').offsetTop + 'px';
	d.toBeTop = '0px';
	d.style.position = 'absolute';
	d.style.width = '320px';
	d.style.left = '-320px';
	d.style.top = '0px';
	d.style.padding = '5px';
	d.id = 'mInfo';
	document.body.getElementById('menu').appendChild(d);
	$('infoLink').href = 'javascript:lessInformation();';

	new Ajax( 'request.php', {update:'mInfo',onComplete: function() {
		loaded();
		new Fx.Styles( 'mInfo', {transition:Fx.Transitions.Back.easeOut}).start({
			'top': $('mInfo').toBeTop,
			'left': $('mInfo').toBeLeft
		} );
	} }).request();
}

function lessInformation() {
	new Fx.Styles( 'mInfo', {transition:Fx.Transitions.Back.easeIn,onComplete: function() {
		document.body.getElementById('menu').removeChild( document.getElementById('mInfo') );
	} }).start({
		'left': '-350'
	} );
	
	$('infoLink').href = 'javascript:moreInformation();';
}

function startLoading() {
	if( !document.getElementById('loading') ) {
		var toBeTop = $('preview').offsetTop + $('preview').offsetHeight;
		var oTop = $('preview').offsetLeft;
	
		var d = document.createElement('div');
		d.id = 'loading';
		d.style.position = 'absolute';
		d.toBeTop = toBeTop - 100 + 'px';
		d.style.top = '-100px';
		d.style.left = oTop - 12 + 'px';
		d.innerHTML = '<img src="loading.gif" />';
		
		document.body.appendChild( d );

		new Fx.Styles( 'loading', {transition:Fx.Transitions.Back.easeOut} ).start( {
			'top': $('loading').toBeTop
		} );
	} else {
		new Fx.Styles( 'loading', {transition:Fx.Transitions.Back.easeOut} ).start( {
			'top': $('loading').toBeTop
		} );
	}
}

function loaded() {
	new Fx.Styles( 'loading', {transition:Fx.Transitions.Back.easeIn} ).start( {
		'top': '-100'
	} );
}

function gup( name ) {
  if( results == null )
    return "";
  else
    return results[1];
}

function loadPrev() {
	if( $('img' + (storeElement.id.replace('img', '').toInt() - 1) ) ) {
		moveElement( $('img' + ( storeElement.id.replace('img', '').toInt() - 1) ) );
	} else {
		if( (storeElement.id.replace('img', '').toInt() - 1) < 0 ) {
			moveElement( $('img15') );
		}
	}
}

function loadNext() {
	if( $('img' + (storeElement.id.replace('img', '').toInt() + 1) ) ) {
		moveElement( $('img' + ( storeElement.id.replace('img', '').toInt() + 1) ) );
	} else {
		if( (storeElement.id.replace('img', '').toInt() + 1) > 15 ) {
			moveElement( $('img0') );
		}
	}
}