var overlay = null;
var overlayCurrentIdx = 0;
var overlayItems = new Array();
var overlayThumbs = new Array();

var overlayFadeDuration = 350;
var overlayScrollDuration = 350;

var overlayScrollLeft = new Array();
var overlayIcons = new Array(
	new Array('Facebook', 'Share on Facebook', 'http://www.facebook.com/sharer.php?u=%u'),
	new Array('MySpace', 'Share on Myspace', 'http://www.myspace.com/Modules/PostTo/Pages/?u=%u'),
	new Array('Twitter', 'Twitt to your followers', 'http://twitter.com/home?status=%s %u')
);
var overlayPreloadImages = new Array(
	'/Assets/Layout/Images/loading-bar-black.gif', 
	'/Assets/Layout/Images/overlay-close.png',
	'/Assets/Layout/Images/overlay-close-hover.png',
	'/Assets/Layout/Images/overlay-save.png',
	'/Assets/Layout/Images/overlay-save-hover.png',
	'/Assets/Layout/Images/arr-next.gif',
	'/Assets/Layout/Images/arr-prev.gif'
);

function overlayShow(content, idx, thumbs, action) {

	pausePolling = true;

	if (overlay != null) return;
	
	overlayItems = content;
	if(idx >= 0 && idx < overlayItems.length) overlayCurrentIdx = idx;
	overlayThumbs = thumbs;
	if(action == undefined) action = function() { pausePolling = false; }
	
	var str = '';
	str += '<div id="overlay">';
	//str += '	<div id="overlay-clicker" style="width: 100%; height: 0;" onclick="overlayHide()"></div>';
	//str += '	<div id="overlay-content">';
	str += '		<div class="top">';
	str += '			<div class="title transparent">&nbsp;</div>';
	str += '		</div>';
	str += '		<div class="slide">';
	str += '			<div class="right"></div>';
	str += '			<div class="left"></div>';
	str += '			<div class="image"></div>';
	str += '		</div>';
	str += '		<div class="bottom">';
	str += '			<div class="close"><img src="/Assets/Layout/Images/spacer.gif" width="69" height="28" alt=""/></div>';
	str += '			<div class="sharing-icons"><div class="icons"></div>Share:</div>';
	str += '			<div class="download">Save Image</div>';
	str += '			<div class="title transparent">&nbsp;</div>';
	str += '		</div>';
	str += '		<div class="thumbnails"></div>';
	//str += '	</div>';
	str += '</div>';
	
	overlay = Elements.from(str, false)[0];
	
	overlay.addEvent('click', overlayConditionalHide);
	
	overlay.getElements('.slide .left')[0].style.visibility = overlayCurrentIdx <= 0 ? 'hidden' : 'visible';
	overlay.getElements('.slide .right')[0].style.visibility = overlayCurrentIdx >= overlayItems.length - 1 ? 'hidden' : 'visible';

	if(overlayItems.length > 1) {
		overlay.getElements('.slide .right').addEvent('click', overlayNext );
		overlay.getElements('.slide .left').addEvent('click', overlayPrev );
	}
	
	overlay.getElements('.thumbnails')[0].style.width = Math.floor( $(document.body).getSize().x * 0.95 ) + 'px';
	overlay.getElements('.thumbnails')[0].style.height = overlayThumbs[0].getProperty('height') + 'px';
	var thumbsContainer = new Element('div', {
		'styles': {
			'width': ( parseInt(overlayThumbs[0].getProperty('width')) + 10 ) * overlayThumbs.length,
			'margin-left': 'auto',
			'margin-right': 'auto'
		}
	} );
	overlay.getElements('.thumbnails')[0].grab(thumbsContainer);
	for(var i = 0; i < overlayThumbs.length; i++) {
		overlayThumbs[i].addEvent('mouseover', function() { this.src = this.getProperty('data-color'); } );
		overlayThumbs[i].addEvent('mouseout', function() { this.src = this.getProperty(this.hasClass('active') ? 'data-color' : 'data-bw'); } );
		overlayThumbs[i].addEvent('click', function() { overlayScrollToIndex(this.getProperty('data-idx')); } );
		overlayThumbs[i].src = overlayThumbs[i].getProperty('data-bw');
		thumbsContainer.grab(overlayThumbs[i]);
	}

	$('container').set('morph', { duration: overlayFadeDuration, transition: Fx.Transitions.linear,
		onComplete: function() {
			overlayStoreScrolls();
			
			$('container').style.position = 'absolute';
			$('container').style.zIndex = '-100';
			$('container').style.top = '-20000px'
			overlay.set('morph', { duration: overlayFadeDuration, transition: Fx.Transitions.linear,
				onComplete: function() {
					$(document.body).addEvent('keyup', overlayHandleKey);
					$(window).addEvent('keyup', overlayHandleKey);
					$$('#overlay .bottom .download')[0].addEvent('click', overlayDownload);
					$$('#overlay .bottom .close')[0].addEvent('click', overlayHide);
					overlayScrollToIndex(idx, action); 
				} 
			} );

			if ( navigator.appName.toLowerCase().indexOf('opera') < 0 ) {
				overlayGetPreloadIcons();
				new Asset.images(overlayPreloadImages.join(',').replace(',,,', ',').split(','), {
					onComplete: function() {
						$(document.body).grab(overlay);
						overlay.morph( { opacity: [0, 1] } );	
					}
				} );
			} else {
				$(document.body).grab(overlay);
				overlay.morph( { opacity: [0, 1] } );
			}
		}
	} );
	
	new Asset.image('/Assets/Layout/Images/loading-bar-black.gif', {
		onload: function() {
			$(document.body).style.background = '#000 url(/Assets/Layout/Images/loading-bar-black.gif) no-repeat center';
			$('container').morph( { opacity: [1, 0] } );
		}
	}); 
}

function overlayHide(action, updateHash) {
	if(overlay.retrieve('hiding', false)) return;
	
	pausePolling = true;
	overlay.store('hiding', true);
	
	if(updateHash == undefined) updateHash = true;
	if(action == undefined) action = function() { pausePolling = false; };

	if(updateHash) {
		var base = window.location.protocol + '//' + window.location.hostname + '/';
		var hash = overlayItems[overlayCurrentIdx].getProperty('data-href').replace(base, '').split('/');
		if ( hash[hash.length-1] == '' ) hash.pop();
		hash.pop();
		hash = hash.join('/');
		
		updateHashText(hash);
		updateCurrentLocation(hash);
	}
	
	$(document.body).style.background = '#000';
	overlay.set('morph', { duration: overlayScrollDuration, transition: Fx.Transitions.linear,		
		onComplete: function() {
			$(document.body).removeEvent('keyup', overlayHandleKey);
			$(window).removeEvent('keyup', overlayHandleKey);
			overlay.dispose();
			overlay = null;
			$('container').style.position = 'inherit';
			$('container').style.zIndex = '0';
			$('container').style.top = '0';
			overlayRestoreScrolls();
			overlayScrollLeft = 0; 
			$('container').set('morph', { duration: overlayScrollDuration, transition: Fx.Transitions.linear, 
				onComplete: function() {
					action.run();
				}
			} );
			$('container').morph( { opacity: [0, 1] } );
		} 
	} );
	overlay.morph( { opacity: 0 } );
}

function overlayHandleKey(e){	
	e = new Event(e);
	//alert(e.key);
	switch(e.key){
	  case 'esc':
	  	overlayHide();
	  	break;
	  case 'left':
	  	overlayPrev();
	  	break;
	  case 'right':
	  	overlayNext();
	  	break;
	  default:
	  	return;
	}
}

function overlaySlideShow(sender, action) {
	if(action == undefined) action = function() { pausePolling = false; }
	var thumbs = $(sender).getParent().getParent().getElements('.image a');

	if(thumbs.length == 1)
		thumbs = $(sender).getParent().getParent().getParent().getParent().getParent().getElements('.thumbs.single .image a');
	
	var content = new Array();
	
	var idx = 0;
	for(var i = 0; i < thumbs.length; i++) {
		var width = thumbs[i].getProperty('data-size').split('x')[0];
		var height = thumbs[i].getProperty('data-size').split('x')[1];
		var element = new Element ('img', {
	    	'alt': thumbs[i].title,
	    	'width': width, 
	    	'height': height,
	    	'src': thumbs[i].href,
	    	'class': 'transparent',
	    	'data-href': thumbs[i].getProperty('data-href'),
	    	'data-series': thumbs[i].getProperty('data-series'),
	    	'data-loaded': false
	    } );
		content[i] = element;
		if(sender == thumbs[i]) idx = i;
	}
	
	var thumbnails = new Array();
	for(var i = 0; i < thumbs.length; i++) {
		var img = thumbs[i].getElements('img')[0];
		var thumbnail = new Element('img', {
			'src': img.getProperty('src'),
			'data-color': img.getProperty('src').replace('&filters%5B%5D=bw', ''),
			'data-bw': img.getProperty('src').replace('&filters%5B%5D=bw', '') + '&filters%5B%5D=bw',
			'width': img.getProperty('width'),
			'height': img.getProperty('height'),
			'data-idx': i
		});
		thumbnails[i] = thumbnail;
	}
	
	overlayShow(content, idx, thumbnails, action);
}

function overlayNext() {
	if(overlayCurrentIdx == overlayItems.length - 1) return;
	overlayScrollToIndex(overlayCurrentIdx + 1);
}

function overlayPrev() {
	if(overlayCurrentIdx == 0) return;
	overlayScrollToIndex(overlayCurrentIdx - 1);
}

function overlayScrollToIndex(idx, action) {
	
	//$("overlay-clicker").style.height = "0";
	//overlay.getElements('.top')[0].style.marginTop = "0";
	
	if(action == undefined) action = function() { pausePolling = false; }
	
	if(idx < 0) idx = 0;
	if(idx > overlayItems.length - 1) idx = overlayItems.length - 1;
	
	overlay.getElements('.slide .left')[0].style.visibility = 'hidden';
	overlay.getElements('.slide .right')[0].style.visibility = 'hidden';
	
	overlayThumbs[overlayCurrentIdx].src = overlayThumbs[overlayCurrentIdx].getProperty('data-bw');
	overlayThumbs[overlayCurrentIdx].removeClass('active');
	
	var container = overlay.getElements('.slide .image')[0];
	if ( container.innerHTML != '' ) {
		var img = container.getElements('img')[0];
	
		if ( overlayItems[idx].getProperty('data-loaded') != 'true' ) 
			container.getParent().style.backgroundImage = 'url(/Assets/Layout/Images/loading-bar-black.gif)';
	
		img.set('morph', { duration: overlayScrollDuration, transition: Fx.Transitions.Quad.easeOut,
			onComplete: function() {
				container.innerHTML = '';
				overlayScrollToIndex(idx, action);
			}
		});
		img.morph( { opacity: [1, 0] } );
		
		overlay.getElements('.top .title')[0].set('morph', { duration: overlayScrollDuration, transition: Fx.Transitions.Quad.easeOut,
			onComplete: function() {
				overlay.getElements('.top .title')[0].innerHTML = '&nbsp;';
			}
		});	
		overlay.getElements('.top .title')[0].morph( { opacity: [1, 0] } );
		
		overlay.getElements('.bottom .title')[0].set('morph', { duration: overlayScrollDuration, transition: Fx.Transitions.Quad.easeOut,
			onComplete: function() {
				overlay.getElements('.bottom .title')[0].innerHTML = '&nbsp;';
			}
		} );
		overlay.getElements('.bottom .title')[0].morph( { opacity: [1, 0] } );
		
		return;
	} 

	overlayCurrentIdx = idx;

	var scroll = new Fx.Scroll($(document.body), { duration: overlayScrollDuration, transition: Fx.Transitions.Quad.easeInOut } );
	scroll.start(0, 0);
	
	var img = overlayItems[idx];
	overlayUpdateHash(idx);	
	var prelaoader = new Asset.image(img.src, { 
		onload: function() { 
			
			if(overlay == null) return;
			
			img.setProperty('data-loaded', 'true');
			container.getParent().style.backgroundImage = 'none';
			container.grab(img);

			var initObj = { duration: overlayScrollDuration, transition: Fx.Transitions.Quad.easeOut };

			overlay.getElements('.top')[0].set('morph', initObj);
			overlay.getElements('.top')[0].morph( { width: img.width } );
			
			var customObj = initObj;
			customObj.onComplete = function() {
				if(overlay == null) return;
				overlay.getElements('.slide .left')[0].style.visibility = idx <= 0 ? 'hidden' : 'visible';
				overlay.getElements('.slide .right')[0].style.visibility = idx >= overlayItems.length - 1 ? 'hidden' : 'visible';
				overlayThumbs[idx].addClass('active');
				overlayThumbs[idx].src = overlayThumbs[idx].getProperty('data-color');
				
				/*
				var sz = overlay.getElements('.top')[0].getSize().y
						+ overlay.getElements('.slide')[0].getSize().y
						+ overlay.getElements('.bottom')[0].getSize().y
						+ overlay.getElements('.thumbnails')[0].getSize().y + 140;
				$("overlay-clicker").style.height = sz + 'px';
				overlay.getElements('.top')[0].style.marginTop = "-" + sz  + "px";
				overlay.style.height = (sz + 60) + 'px';
				*/
				
				action.run();
			}
			overlay.getElements('.slide')[0].set('morph', customObj);
			overlay.getElements('.slide')[0].morph( { width: img.width, height: img.height } );
			
			overlay.getElements('.bottom')[0].set('morph', initObj);
			overlay.getElements('.bottom')[0].morph( { width: img.width } );
			
			img.set('morph', initObj);
			img.morph( { opacity: [0, 1] } );
			
			overlayMakeSharingIcons(idx);
			overlaySetTitles(idx);
		} 
	} );
}

function overlayMakeSharingIcons(idx) {
	if (idx == undefined) idx = 0;
	var container = $$('#overlay .icons')[0];
	if (container == undefined) return;
	
	var icons = new Array();
	
	for (var i = 0; i < overlayIcons.length; i++) {
		var url = escape(overlayItems[idx].getProperty('data-href'));
		var summary = escape(overlayItems[idx].getProperty('data-series') + ' by Marius Budu');
	
		var def = overlayIcons[i];
		var href = def[2].replace('%u', url).replace('%s', summary);
		var img = '/Assets/Layout/Images/os-' + def[0].toLowerCase() + '.png';
		var imgHover = '/Assets/Layout/Images/os-' + def[0].toLowerCase() + '-hover.png';
		var icon = new Element('div', {
			'html': '<a href="' + href + '" onclick="this.target = \'_blank\'" title="' + def[1] + '"><img src="' + img + '" onmouseover="this.src=\'' + imgHover + '\'" onmouseout="this.src=\'' + img + '\'"  width="20" height="20" alt="' + escape(def[0]) + '" /></a>',
			'class': 'icon'
		} );
		icons[i] = icon; 
	}

	container.innerHTML = '';
	for (var i = icons.length - 1; i >= 0; i--) {
		container.grab(icons[i]);	
	}
}

function overlayDownload() {
	location.href= overlayItems[overlayCurrentIdx].src + '?dispose=download';
}

function overlaySetTitles(idx) {
	var img = overlayItems[idx];

	overlay.getElements('.top .title')[0].innerHTML = img.alt != '' ? img.alt : img.getProperty('data-series');	
	overlay.getElements('.top .title')[0].set('morph', { duration: overlayScrollDuration, transition: Fx.Transitions.Quad.easeOut } );
	overlay.getElements('.top .title')[0].morph( { opacity: [0, 1] } );
	
	overlay.getElements('.bottom .title')[0].set('morph', { duration: overlayScrollDuration, transition: Fx.Transitions.Quad.easeOut } );
	//overlay.getElements('.bottom .title')[0].innerHTML = img.alt == '' ? '' : img.getProperty('data-series') + ' by Marius Budu';
	//overlay.getElements('.bottom .title')[0].innerHTML += img.alt == '' ? '' : ' | ';
	overlay.getElements('.bottom .title')[0].innerHTML += 'Image ' + String(parseInt(idx) + 1) + ' of ' + overlayItems.length;
	overlay.getElements('.bottom .title')[0].morph( { opacity: [0, 1] } );

}

function overlayStoreScrolls() {
	overlayScrollLeft = new Array();
	var scs = $$('.elements .scrolling-content');
	for(var i = 0; i < scs.length; i++){
		overlayScrollLeft[i] = scs[i].scrollLeft;
	}
}

function overlayRestoreScrolls() {
	var scs = $$('.elements .scrolling-content');
	for(var i = 0; i < scs.length; i++){
		scs[i].scrollLeft = overlayScrollLeft[i];
	}
	overlayScrollLeft = new Array();
}

function overlayGetPreloadIcons() {
	for (var i = 0; i < overlayIcons.length; i++) overlayPreloadImages[overlayPreloadImages.length + i] = '/Assets/Layout/Images/os-' + overlayIcons[i][0].toLowerCase() + '.png';
	for (var i = 0; i < overlayIcons.length; i++) overlayPreloadImages[overlayPreloadImages.length + i] = '/Assets/Layout/Images/os-' + overlayIcons[i][0].toLowerCase() + '-hover.png';
}

function overlayUpdateHash(idx) {
	var href = overlayItems[idx].getProperty('data-href');
	var base = window.location.protocol + '//' + window.location.hostname + '/';
	var hash = href.replace(base, '').substr(0, href.replace(base, '').length - 1);
	updateHashText(hash);
	updateCurrentLocation(hash);
}

function overlayGetIdxByHash(hash) {
	var idx = -1;
	for(var i = 0; i < overlayItems.length; i++) {
		var href = overlayItems[i].getProperty('data-href');
		if( href.indexOf(hash) != href.length - hash.length - 1 ) continue;
		idx = i;
	}
	return idx;
}

function overlayConditionalHide(evt) {
	var x = evt.client.x;
	var y = evt.client.y;
	
	// Top
	var pos = overlay.getElements('.top')[0].getCoordinates();
	if ( x >= pos.left && x <= pos.right && y >= pos.top && y <= pos.bottom ) { return; }
	
	// Slide
	var pos = overlay.getElements('.slide')[0].getCoordinates();
	if ( x >= pos.left && x <= pos.right && y >= pos.top && y <= pos.bottom ) { return; }
	
	// Bottom
	var pos = overlay.getElements('.bottom')[0].getCoordinates();
	if ( x >= pos.left && x <= pos.right && y >= pos.top && y <= pos.bottom ) { return; }
	
	overlayHide();
}