/**
 * slideshow for speedlightprokit.com
 * based on http://snippets.dzone.com/posts/show/1320
 * 
 * @author Charles Peter Jupili
 * @email vmxbmx@yahoo.com 
 */
;(function() {
	var pexec = null;
	var imgLength = $$('#frame-thumbs img').length;
	var currImgIdx = 0;
	var prevImgIdx = 0;
	
	$$('#frame-thumbs img').each(function(el, i) {
		el.style.opacity = 0.5;
		el.style.filter  = 'alpha(opacity=50)';
	});
	
	$('tInfo').style.opacity = 0.7;
	$('tInfo').style.filter  = 'alpha(opacity=70)';
	
	var slideshow = {
		start: function() {
		    var link = $('frame-thumbs').down('a', currImgIdx);
		    var imgc = $('frame-thumbs').down('img', currImgIdx);
			var imgp = $('frame-thumbs').down('img', prevImgIdx);
			
			var slpk_thumb_title      = '<div style="padding: 5px 0 0 5px;">' + $('slpk-thumb-' + currImgIdx ).down('div', 0).innerHTML.toString() + '</div>';
			var slpk_thumb_desc       = '<div style="padding: 0 0 0 5px;">' + $('slpk-thumb-' + currImgIdx ).down('div', 1).innerHTML.toString() + '</div>';
			var slpk_thumb_url_medium = $('slpk-thumb-' + currImgIdx ).down('div', 2).innerHTML.toString();
			
			imgc.fade({duration: 0, to: 1});
			if (prevImgIdx != currImgIdx)
				imgp.fade({duration: 0, to: 0.5});
			
			$('tInfo').update('<div>' + slpk_thumb_title + slpk_thumb_desc + '</div>');
		    $('tImage').update('<div><img id="tImg" src="'+ slpk_thumb_url_medium +'" alt="" /></div>');
		    
		    prevImgIdx = currImgIdx;
		    currImgIdx++;
		    
		    pexec = new PeriodicalExecuter(slideshow.cycle, 6);
		},
		
		cycle: function(pe) {
			if (currImgIdx == imgLength) currImgIdx = 0;
			var link = $('frame-thumbs').down('a', currImgIdx);
			var imgc = $('frame-thumbs').down('img', currImgIdx);
			var imgp = $('frame-thumbs').down('img', prevImgIdx);
			
			var slpk_thumb_title      = '<div style="padding: 5px 0 0 5px;">' + $('slpk-thumb-' + currImgIdx ).down('div', 0).innerHTML.toString() + '</div>';
			var slpk_thumb_desc       = '<div style="padding: 0 0 0 5px;">' + $('slpk-thumb-' + currImgIdx ).down('div', 1).innerHTML.toString() + '</div>';
			var slpk_thumb_url_medium = $('slpk-thumb-' + currImgIdx ).down('div', 2).innerHTML.toString();
			
			imgc.fade({duration: 0, to: 1});
			if (prevImgIdx != currImgIdx)
				imgp.fade({duration: 0, to: 0.5});
			
			Effect.SlideUp('tInfo', {
                duration: 0.5,
                fps: 50,
                afterFinish: function () {
					
					$('tInfo').update('<div>' + slpk_thumb_title + slpk_thumb_desc + '</div>');
				
					new Effect.Fade('tImg', {
						duration: 0.5,
						fps: 50,
						afterFinish: function() {
							$('tImage').update('<img id="tImg" style="display: none;" src="'+ slpk_thumb_url_medium +'" alt="" />');
							new Effect.Appear('tImg', {
								duration: 0.5,
								fps: 50,
								afterFinish: function() {
									new Effect.SlideDown('tInfo', {
										duration: 0.5,
										fps: 50,
										queue:'end'
									});
								}
							});
						}
					});
				}
            });
			
			prevImgIdx = currImgIdx;
			currImgIdx++;
			//pe.stop();
		}
	};
	
	
	
	$('nav-prev').observe('click', function(e) {
		pexec.stop();
		var currpage = parseInt($('nav-current-page').innerHTML);
		if (currpage == 1) return false;
		
		new Ajax.Updater('frame-thumbs', location.href, {
			asynchronous: true,
			method: 'get',
			encoding: 'UTF-8',
			parameters: { currpage: currpage, dir: 'prev' },
			onComplete: function() {
				
				$$('#frame-thumbs img').each(function(el, i) {
					el.style.opacity = 0.5;
					el.style.filter  = 'alpha(opacity=50)';
				});
				
				pexec.stop();
				pexec = null;
				imgLength = $$('#frame-thumbs img').length;
				currImgIdx = 0;
				prevImgIdx = 0;
				
				var slpk_thumb_title      = '<div style="padding: 5px 0 0 5px;">' + $('slpk-thumb-' + currImgIdx ).down('div', 0).innerHTML.toString() + '</div>';
				var slpk_thumb_desc       = '<div style="padding: 0 0 0 5px;">' + $('slpk-thumb-' + currImgIdx ).down('div', 1).innerHTML.toString() + '</div>';
				var slpk_thumb_url_medium = $('slpk-thumb-' + currImgIdx ).down('div', 2).innerHTML.toString();
				
				Effect.SlideUp('tInfo', {
	                duration: 0.5,
	                fps: 50,
	                afterFinish: function () {
						
						$('tInfo').update('<div>' + slpk_thumb_title + slpk_thumb_desc + '</div>');
					
						new Effect.Fade('tImg', {
							duration: 0.5,
							fps: 50,
							afterFinish: function() {
								$('tImage').update('<img id="tImg" style="display: none;" src="'+ slpk_thumb_url_medium +'" alt="" />');
								new Effect.Appear('tImg', {
									duration: 0.5,
									fps: 50,
									afterFinish: function() {
										new Effect.SlideDown('tInfo', {
											duration: 0.5,
											fps: 50,
											queue:'end',
											afterFinish: function() {
			                    				currImgIdx = 0;
			                    				prevImgIdx = currImgIdx;
			                    				slideshow.start();
			                    			}
										});
									}
								});
							}
						});
					}
	            });
			}
		});
		e.stop();
	});
	
	$('nav-next').observe('click', function(e) {
		pexec.stop();
		var currpage = parseInt($('nav-current-page').innerHTML);
		
		new Ajax.Updater('frame-thumbs', location.href, {
			asynchronous: true,
			method: 'get',
			encoding: 'UTF-8',
			parameters: { currpage: currpage, dir: 'next' },
			onComplete: function() {
				
				$$('#frame-thumbs img').each(function(el, i) {
					el.style.opacity = 0.5;
					el.style.filter  = 'alpha(opacity=50)';
				});
				
				pexec.stop();
				pexec = null;
				imgLength = $$('#frame-thumbs img').length;
				currImgIdx = 0;
				prevImgIdx = 0;
				
				var slpk_thumb_title      = '<div style="padding: 5px 0 0 5px;">' + $('slpk-thumb-' + currImgIdx ).down('div', 0).innerHTML.toString() + '</div>';
				var slpk_thumb_desc       = '<div style="padding: 0 0 0 5px;">' + $('slpk-thumb-' + currImgIdx ).down('div', 1).innerHTML.toString() + '</div>';
				var slpk_thumb_url_medium = $('slpk-thumb-' + currImgIdx ).down('div', 2).innerHTML.toString();
				
				Effect.SlideUp('tInfo', {
	                duration: 0.5,
	                fps: 50,
	                afterFinish: function () {
						
						$('tInfo').update('<div>' + slpk_thumb_title + slpk_thumb_desc + '</div>');
					
						new Effect.Fade('tImg', {
							duration: 0.5,
							fps: 50,
							afterFinish: function() {
								$('tImage').update('<img id="tImg" style="display: none;" src="'+ slpk_thumb_url_medium +'" alt="" />');
								new Effect.Appear('tImg', {
									duration: 0.5,
									fps: 50,
									afterFinish: function() {
										new Effect.SlideDown('tInfo', {
											duration: 0.5,
											fps: 50,
											queue:'end',
											afterFinish: function() {
			                    				currImgIdx = 0;
			                    				prevImgIdx = currImgIdx;
			                    				slideshow.start();
			                    			}
										});
									}
								});
							}
						});
					}
	            });
			}
		});
		e.stop();
	});
	
	document.observe('dom:loaded', function () {
		Effect.SlideDown('tInfo', {
	    	duration: 0.4,
	    	fps: 50
	    });
		
		slideshow.start();
	});
	
})();