/**
*
* Flippin' Awesome Gallery Written 100% By Jesse G. Donat
*
**/

(function(){
	var mainImgs;
	var mainSmalls;
	var mainImageWrap;
	var mainImg = false;
	//var imagesHash = new Hash();
	
	window.addEvent('domready', function() {
		
		mainImgs = $$('div.main_imgs img');
		mainSmalls = $$('div.main_imgs div img');
		
		if( mainImgs.length > 0 ) {
			mainImg = mainImgs[0];
			mainImageWrap = mainImg.getParent('strong');
			if( mainSmalls.length > 0 ) {
				mainImg.getParent('td').addClass('ajaxLoading');
			}
		
			//lets preload
			var imagesToPreload = [ 'css/milkbox/loading.gif', mainImg.get('src') ];
			mainSmalls.each(function(el){
				var rel = el.get('rel');
				imagesToPreload.push( rel );				
				var mEL = new Element('div', {
					'styles': {
						'background': 'url(' + rel + ') bottom center no-repeat',
						'position':'absolute',
						'bottom':0						
					}

				});
				mEL.fade('hide');
				mEL.inject(mainImageWrap, 'top');
				mEL.store('src', rel);	
				el.store('thumb', mEL);
				
			});

			Asset.images(imagesToPreload, { onComplete: function() {
					
					var holdDiv = new Element('div',{'styles':{'height':0, 'overflow':'hidden'}}).inject($$('body')[0],'top');
					var mainImgSize =  new Element('img', { 'src' : mainImg.get('src') }).inject(holdDiv).getSize();
					
					mainImageWrap.setStyles({
						display: 'block',
						width:  mainImgSize.x,
						height: mainImgSize.y,
						overflow : 'visible',
						position: 'relative'
					});
					
					mainSmalls.each(function(el){
						var thumb = el.retrieve('thumb');
						var mImg = new Element('img', {'src': thumb.retrieve('src') }).inject(holdDiv);
						
						thumb.setStyles({
							width:  mainImgSize.x,
							height: mainImgSize.y + 500,
							'bottom': Math.max(mainImgSize.y - mImg.getSize().y,0)
						});
					});
					
					//this is a hack for small stupid images, may want to remove eventually
					$$('div.main_imgs div').setStyle( 'width', mainImgSize.x );
					
					mainImg.getParent('td').removeClass('ajaxLoading');
					
					
					
				}
			});
			
			//if the image hasn't loaded in 30 seconds something wrong, remove the loading hide
			(function(){ mainImg.getParent('td').removeClass('ajaxLoading'); }).delay(30000);
			
			mainSmalls.addEvent('mouseover', function(e){
				mainImg.fade('out');
				e.target.retrieve('thumb').fade('in');
			});
			
			mainSmalls.addEvent('mouseout', function(e){
				mainImg.fade('in');
				e.target.retrieve('thumb').fade('out');
			});
		}
		
		
	});
		
})();