var _LAST_OFFSET = 0;
var _PHOTO_AR;
function initIntro() {
	if ($('intro-logo')) {
		_PHOTO_AR = null;

		// request home image
		var urlimg = '/ajax/intro-image.php';
		var d = new Ajax.Request(urlimg, {
			method: 'get',
			parameters: { size: ((_BASE_SCREEN == _SCREENSIZE_LARGE) ? 'large': 'small') },
			requestHeaders: { accept: 'application/x-json' },
			onSuccess: function(tp) {
				var jsr = tp.responseText.evalJSON();

				var url = '/photos/'+_BASE_SCREEN+'/intro/'+jsr.filename;
				$(_ID_PHOTO_INTRO).src = url;
				_PHOTO_AR = jsr.width / jsr.height;
			},
			onFailure: function() {}		
		});

		// request navigation
		var url = '/ajax/intro.php?size=';
		url += ((_BASE_SCREEN == _SCREENSIZE_LARGE) ? 'large': 'small');
		var s = new Ajax.Request(url, {
			method: 'get',
			onSuccess: function(tp) {
				$('intro-nav').innerHTML = tp.responseText;

				updateIntroOffset();
				setTimeout(function() { 
					_INTRO_COUNT = 0;
					$$('div#intro-nav li a').each(function(a, index) {
						a.setAttribute('offset', index);
						index == 0 ? a.addClassName('current') : '';
						Event.observe(a,'click',function(e) {

							// reset interval
							
							clearInterval(_INTRO_INT);
							_INTRO_INT = setInterval(rotateIntroPhoto, 8000);


							$$('div#intro-nav li a')[_LAST_OFFSET].removeClassName('current');
							e.element().addClassName('current');
							_LAST_OFFSET = e.element().getAttribute('offset');
							e.element().blur();

							// load new image
							var url = '/photos/'+_BASE_SCREEN+'/intro/'+e.element().getAttribute('rel');

							changeIntroImage(url);
							e.stop();
						});
						_INTRO_COUNT++;
					});
				},100);

// uncomment this
				_INTRO_INT = setInterval(rotateIntroPhoto, 8000);
			},
			onFailure: function() {}
		});
	}

}
function rotateIntroPhoto() {
	db('last offset: '+_LAST_OFFSET);
	var objNavs = $$('div#intro-nav li a');
	objNavs[_LAST_OFFSET].removeClassName('current');
	parseInt(_LAST_OFFSET)+1 >= _INTRO_COUNT ? newOffset = 0 : newOffset = parseInt(_LAST_OFFSET)+1;
	_LAST_OFFSET = newOffset;
	// update nav
	objNavs[newOffset].addClassName('current');
	var rel = $$('div#intro-nav li a')[newOffset].getAttribute('rel');
	var url = '/photos/'+_BASE_SCREEN+'/intro/'+rel;

	db('new last offset: '+_LAST_OFFSET);
	changeIntroImage(url);
}

function expandIntroPhoto() {
	var w = $('photo').getWidth();
	var h = $('photo').getHeight();
	var ar = w / h;
	

}

function updateIntroOffset() {

	var w = document.viewport.getWidth();
	var h = document.viewport.getHeight();
	var n = $('intro-nav').getWidth(); //$('content-about').getHeight();
	var l = $('intro-logo').getWidth();
	var lt = $('intro-logo').getHeight();

	var p = (w / 2) - (n / 2);
	$('intro-nav').setStyle({ left: p+'px' });

	var lp = (h / 2) - (lt / 2);
	var tp = (w / 2) - (l / 2);
	$('intro-logo').setStyle({ left: tp+'px', top: lp+'px' });
}



function changeIntroImage(uri) {
	db('loading image intro');
	if (!_LOCK_TRANSITION) {
		
		_PHOTO_AR = null;
		_LOCK_TRANSITION = true;
		_TEMP_IMAGE != null ? _TEMP_IMAGE.stopObserving() : '';

		// show loading
		// first center it
		var v = document.viewport.getDimensions();
		var d = $('loading').getDimensions();
		$('loading').setStyle({ left: ((v.width/2)-(d.width/2))+'px', top: ((v.height/2)-(d.height/2))+'px' });
		$('loading').setStyle({ display: 'none' });
		$('loading').removeClassName('hidden');
		var p = Effect.Appear('loading', { duration: 1.0, queue: 'end' });


		// get file name
		var arrFn = uri.split('/');
		var l = arrFn.length - 1;
		var g = l - 1;
		var gname = arrFn[g];
		var fn = arrFn[l];

		// load image details
		var url = '/ajax/photo-info.php';
		var s = new Ajax.Request(url, {
			method: 'get',
			parameters: { size: _BASE_SCREEN, filename: fn, gallery: gname },
			onSuccess: function(tp) {
				db('image loaded intro');
				var jsr = tp.responseText.evalJSON(); // width, height

				// calculate new width and height
				_PHOTO_SIZE.width = jsr.width;
				_PHOTO_SIZE.height = jsr.height;
				_PHOTO_AR = jsr.width / jsr.height;
				var neww = v.width;
				var newh = neww / _PHOTO_AR;
				var mt = ((v.height-50) / 2) - (newh / 2);
				var ml = 0;
				if (newh < v.height) {
					newh = v.height;
					neww = newh * _PHOTO_AR;

					// update margin
					mt = 0;
					ml = (v.width / 2) - (neww / 2);
				}
				db('step: 4');
//				newh = eval(document.viewport.getHeight() - 50 - ($(_ID_THUMBNAILS) ? 100 : ''));
//				neww = newh * _PHOTO_AR;

				_TEMP_IMAGE = new Image(neww, newh);
				Element.observe(_TEMP_IMAGE, 'load', function() {
					db('tempimage load');
					// hide load
					var l = Effect.Fade('loading', { duration: 0.5, queue: 'parallel' });

					var p = $(_ID_PHOTO_CONTAINER_EFFECT).firstDescendant();
					if (p != null) {
						p.remove();
					}

					// update photo div
					$(_ID_PHOTO_CONTAINER_EFFECT).setStyle({ height: $(_ID_PHOTO_CONTAINER).getHeight()+'px' }).insert({ top: this });	
					$(_ID_PHOTO_CONTAINER_EFFECT).setStyle({ display: 'none' });
					$(_ID_PHOTO_CONTAINER_EFFECT).removeClassName(_CSS_CLASS_HIDDEN);

					var s = Effect.Appear(_ID_PHOTO_CONTAINER_EFFECT, { duration: 1.0 });
					var t = this.src;
					this.width = neww;
					this.height = newh;
					var sizes = { width: neww, height: newh };
					var margins = { left: ml, top: mt };
					_TEMP_TIMEOUT = setTimeout(function() {

						if (neww >= $(_ID_PHOTO_INTRO).getWidth()) {
							db('no fade intro');
							$(_ID_PHOTO_INTRO).setStyle({ marginLeft: ml+'px', marginTop: mt+'px', width: sizes.width+'px', height: sizes.height+'px' });
							$(_ID_PHOTO_INTRO).setAttribute('width', sizes.width);
							$(_ID_PHOTO_INTRO).setAttribute('height', sizes.height);
							$(_ID_PHOTO_INTRO).src = t;
							_LOCK_TRANSITION = false;
							setTimeout(removeEffectContainerImageIntro, 100);
						}
						else {
							db('fade out intro');
							Effect.Fade(_ID_PHOTO_INTRO, { duration: 0.3 });
							setTimeout(function() {
								$(_ID_PHOTO_INTRO).setStyle({ marginLeft: ml+'px', marginTop: mt+'px', width: sizes.width+'px', height: sizes.height+'px' });
								$(_ID_PHOTO_INTRO).setAttribute('width', sizes.width);
								$(_ID_PHOTO_INTRO).setAttribute('height', sizes.height);
								$(_ID_PHOTO_INTRO).src = t;
								_LOCK_TRANSITION = false;
								setTimeout(removeEffectContainerImageIntro, 100);
							}, 300);
						}
					}, 1000);
				});
				Element.extend(_TEMP_IMAGE);
				_TEMP_IMAGE.src = uri;
				_TEMP_IMAGE.width = neww;
				_TEMP_IMAGE.height = newh;

				// update photo center
				//var l = (document.viewport.getWidth() / 2) - (neww / 2);
				_TEMP_IMAGE.setStyle({ marginLeft: ml+'px', marginTop: mt+'px' });



				// db($(_ID_PHOTO).getStyle('top'));
				_TEMP_IMAGE.addClassName(_CSS_CLASS_REL);
				//galleryUpdateOffsets();
			}
		});

	}
	/*
	
	PSEUDO:

	1. preload image
	2. create div
		i. create image in div
		ii. crop image within div
	3. fade div above image

	*/
}


function removeEffectContainerImageIntro() {
//	!_LOCK_TRANSITION ? $(_ID_PHOTO_CONTAINER_EFFECT).firstDescendant().remove() : setTimeout(removeEffectContainerImage, 100);

	if (!_LOCK_TRANSITION) {
		Effect.Appear(_ID_PHOTO_INTRO, { duration: 0 });
		setTimeout(function() {
			$(_ID_PHOTO_CONTAINER_EFFECT).firstDescendant().remove();
			$(_ID_PHOTO_CONTAINER_EFFECT).addClassName(_CSS_CLASS_HIDDEN);
		}, 100);
	}
	else {
		setTimeout(removeEffectContainerImageIntro, 100);
	}
}