window.addEvent('domready', function() {
	var maximg = 0;
	var increm = 12;	
	var batch = 0;
	

	
	var viewFullImage = function(image) {
		
		imgtop =  (window.getHeight().toInt()/2).toInt()+window.getScrollTop().toInt();
		closeLinktop =  (window.getHeight().toInt()/2).toInt()+window.getScrollTop().toInt()+152;
		var viewer 	= $('viewer');
		$('viewer').setStyles({'display':'block'});
		var shield = $('shield');
		$('shield').setStyles({'opacity':0,'display':'block'});
		var img    		= new Element('img',{'src': 'images/graphics/portfolio/' + image.src , 'styles':{'top':imgtop+'px','opacity':0,'display':'block'}}).injectInside(viewer);		
		var closeLink 	= new Element('span',{id:'closeLink','styles':{'top':closeLinktop+'px','cursor':'pointer'}}).set('html','Click  To Close').injectAfter(img)	;
		var viewerFX = new Fx.Morph(viewer, {duration: 500, transition: Fx.Transitions.Sine.easeOut});
		var shieldFX = new Fx.Morph(shield, {duration: 400, transition: Fx.Transitions.Sine.easeOut});
		var imgFX = new Fx.Morph(img, {duration: 500, transition: Fx.Transitions.Sine.easeOut});

		shieldFX.start({'opacity':0.8});
		imgFX.start({'opacity':1});	

		var closeFullImage = function(){
			closeLink.destroy();
			shieldFX.start({'opacity':0});
			imgFX.start({'opacity':0
			}).chain(function(){
				viewer.setStyles({'display':'none'})
			}).chain(function(){
				shield.setStyles({'display':'none'})
			}).chain(function(){
				viewer.empty()
			}).chain(function(){
				$('abh').setStyles({'position':'absolute','top':'100px'});
			});			
		}
		img.addEvent("click",closeFullImage);
		closeLink.addEvent("click",closeFullImage);	
	}

	var lastBatch = new Fx.Morph('lastBatch', {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
	var nextBatch = new Fx.Morph('nextBatch', {duration: 'long', transition: Fx.Transitions.Sine.easeOut});
	
	var addImages = function(image) {
		var gallery = $('gallery');
		var el     = new Element('div', {'class': 'preview', 'styles':{'opacity':0}});
		var name   = new Element('div', {'class': 'preview_title'}).set('html',image.description).injectInside(el);
		var img    = new Element('img', {'src': 'images/graphics/portfolio/' + image.src , height:80+'px', width:120+'px'}).injectAfter(name);
		var desc   = new Element('span').set('html',image.name).injectAfter(img);		
		var footer = new Element('span').injectAfter(desc);
		el.addEvent("click",function(){viewFullImage(image)});
		el.inject(gallery);
		var elFX = new Fx.Morph(el, {duration: 300, transition: Fx.Transitions.Sine.easeOut}).start({'opacity': 1 });
	}

	var requestImages = function(){
		
		var stnum = batch*increm;
		if(stnum<=0){stnum=0;}
		$('batch_count').set('html',(stnum+1)+'-'+(stnum+increm));
		
		lastBatch.start({'opacity': 0 });
		nextBatch.start({'opacity': 0  });
		
		var request =  new Request.JSON({
			url: 'includes/graphics/portfolio_list_json.php?start_num='+stnum,
			method: 'post',
			onComplete: function(jsonObj) {
 				var myChain = new Chain();
				jsonObj.previews.each(			
					function(image) {
						myChain.chain( function(){ addImages(image);} );
					}
				);
				var runChain = function() { 
					myChain.callChain();
					if(stnum>0){
						lastBatch.start({'opacity': 1 });
					}
					nextBatch.start({'opacity': 1 });
				};
				var timer = runChain.periodical(500);
			}
		}).send();
	} 
	
	$('nextBatch').addEvent('click',function(e){
			e = new Event(e).stop();
			$('gallery').empty();
			batch = batch+1;
			lastBatch.start({'opacity': 0 });
			nextBatch.start({'opacity': 0 });
			requestImages(e);
	});
	
	$('lastBatch').addEvent('click', function(e) {
		e = new Event(e).stop();
		$('gallery').empty();
		batch = batch-1;
		lastBatch.start({'opacity': 0 });
		nextBatch.start({'opacity': 0 });		
		requestImages(e)
	});
	
	requestImages();
	
});