var PhotoModule = Class.create();

PhotoModule.defaults = {
	request_url: 					false,
	
	photo_container:				'pm_holder',
	photo_wrap:						'pm_holder_',
	photo_image:					'photoImg_',
	module_wrap:					'photoModule',
	
	leftButton:						'pm_goLeft',
	rightButton:					'pm_goRight',
	
	leftBox:						'pm_boxLeft',
	rightBox:						'pm_boxRight',
					
	pm_template:					'<div class="photo" id="#{photo_wrap}#{photo_id}" style="z-index:#{zindex}; margin-left:#{marginleft}px;">\n<table cellspacing="0" cellpadding="0">\n<tr valign="bottom">\n<td valign="bottom" style="height: 179px; ">\n<img width="#{photo_width}" id="#{photo_image}#{photo_id}" src="#{image_url}" />\n</td>\n</tr>\n</table>\n</div>\n',
	
	// set size of photos
	photo_max_width:				126,
	photo_medium_width:				93,
	photo_small_width:				67,

	photo_title_nav:				'pm_nav_title',
	photo_title:					'pm_content_title',
	photo_functie:					'pm_content_functie',
	photo_content:					'pm_content_text',

	// zindex
	photo_zindex_max:				20,
	photo_zindex_medium:			18,
	photo_zindex_low:				13,
	photo_zindex_hidden:			11,
	
	// position
	photo_pos_hidden_left:			0,
	photo_pos_left:					68,
	photo_pos_center:				164,
	photo_pos_right:				289,
	photo_pos_hidden_right:			383,
	
	effect_timer:					1.2,
	// no need to edit
	photo_random:					true,
	photo_active:					false,
	photo_total:					false
};


PhotoModule.prototype = {
	photos : {},
	
	initialize: function(options) 
	{
		// Start with the defaults and over ride with
		// the specific options were provided.
		this.opt = {};
		Object.extend(this.opt, PhotoModule.defaults);
		Object.extend(this.opt, options || { });	
		
		if(!this.opt['request_url']) this.opt['request_url'] = '/index.php/Cibap/photomod/';

		this._initPhotos();
	},
	
	_initPhotos: function()
	{
	
		var opt = this.opt;
		var photos = this.photos;
		//var elements = $$('#' + opt['module_wrap'] + ' [photo]');
		
		var t = $('T').value;
		
		new Ajax.Request(opt['request_url'] + '?P=load', {
		method: 'get',
		parameters: 'ajax_opt=all&t=' + t,
		onSuccess: function(resp) {
			if(resp.responseText != false)
			{
				//alert(resp.responseText);
				var photos_rsp = resp.responseText.evalJSON(true);
				//alert(photo_rsp[0]['title']);			
				var photo_count = photos_rsp.length;
				//alert(photo_count);
				if(!opt['photo_total']) opt['photo_total'] = photo_count;
				
				// show random photo as active?
				if( opt['photo_random'] ) opt['photo_active'] = Math.floor((Math.random() * opt['photo_total']));
				
				$( opt['photo_title_nav'] ).update( photos_rsp[opt['photo_active']]['creator'] );
				$( opt['photo_title'] ).update( photos_rsp[opt['photo_active']]['title']);
				$( opt['photo_content'] ).update( photos_rsp[opt['photo_active']]['body'] ); 
				//this._setText( opt['photo_active'] );

				var iPhoto = new Template( opt['pm_template'] );
				
				var photoGallery = '';
				for( var i = 0; i < photo_count; i++ )
				{
					var data = [];

					if( i < opt['photo_active'] ) { // foto bevind zich links van de actieve foto
						if( i == (opt['photo_active']-1) ) { // foto bevind zich direct links van de actieve foto
							data = [opt['photo_pos_left'], opt['photo_zindex_medium'], opt['photo_medium_width']];
						} else { // foto bevind zich links buiten beeld
							data = [opt['photo_pos_hidden_left'], opt['photo_zindex_hidden'], opt['photo_small_width']];
						}		
					} else if( i > opt['photo_active'] ) { // foto bevind zich rechts van de actieve foto
						if( i == (opt['photo_active']+1) ) { // foto bevind zich direct rechts van de actieve foto
							data = [opt['photo_pos_right'], opt['photo_zindex_medium'], opt['photo_medium_width']];
						} else { // foto bevind zich rechts buiten beeld
							data = [opt['photo_pos_hidden_right'], opt['photo_zindex_hidden'], opt['photo_small_width']];
						}
					} else { // de foto is de actieve foto
						data = [opt['photo_pos_center'], opt['photo_zindex_max'], opt['photo_max_width']];
					}
					
					photoGallery += iPhoto.evaluate({
						photo_wrap: opt['photo_wrap'],
						photo_image: opt['photo_image'],
						photo_id: i,
						image_url: photos_rsp[i]['image'],
						photo_width: (opt['photo_medium_width'] * (data[2] / 100)),
						marginleft: data[0],
						zindex: data[1]
					});
					
					photos[i] = { title:  photos_rsp[i]['title'], creator:  photos_rsp[i]['creator'], body:  photos_rsp[i]['body'] }
				
				}

				$( opt['photo_container'] ).update( photoGallery );				
	
				if((opt['photo_active']+1) == opt['photo_total']) {
					$(opt['rightButton']).hide();		
				} else if(!$(opt['rightButton']).visible()) {
					$(opt['rightButton']).show();	
				}

				if(opt['photo_active'] == 0) {
					$(opt['leftButton']).hide();	
				} else if(!$(opt['leftButton']).visible()) {
					$(opt['leftButton']).show();	
				}
				
				
			} else {
				alert('error');
			}
		}	
		});
		
		$(opt['rightButton']).observe( 'click', this._goLeft.bindAsEventListener(this, opt['rightButton']));
		document.observe( 'keydown', this._keyHandler.bindAsEventListener(this, document));
		$(opt['leftButton']).observe( 'click', this._goRight.bindAsEventListener(this, opt['leftButton']));	
	},
	
	_setText: function( id )
	{
		var opt = this.opt;		
		var photos = this.photos;

		$( opt['photo_title_nav'] ).update( photos[id]['creator'] );
		$( opt['photo_title'] ).update( photos[id]['title']);  
		$( opt['photo_content'] ).update( photos[id]['body'] ); 
	},
	
	_setButtons: function()
	{
		var opt = this.opt;
		
		if((opt['photo_active']+1) == opt['photo_total']) {
			this._fade($(opt['rightButton']));		
		} else if(!$(opt['rightButton']).visible()) {
			this._appear($(opt['rightButton']));	
		}

		if(opt['photo_active'] == 0) {
			this._fade($(opt['leftButton']));	
		} else if(!$(opt['leftButton']).visible()) {
			this._appear($(opt['leftButton']));	
		}
	},	
	
	_keyHandler: function(e)
	{
		var event = e || event;
		var key = event.which || event.keyCode;

		if(key == 37) 
		this._goRight();

		if(key == 39) 
		this._goLeft();
	},
	
	_cancelEffect: function( scope )
	{
		// cancel all effects in the given scope
		var queue = Effect.Queues.get( scope );
		queue.each(	
			function(effect) { 
				effect.cancel(); 
			}
		);
	},
	
	_runningEffect: function( scope )
	{
		var running = false; 
		// check if an effect is running in the given scope
		var queue = Effect.Queues.get( scope );
		queue.each(	
			function(effect) { 
				running = true; 
			}
		);
		// return the bool
		return running;
	},
		
	_goLeft: function()
	{
		var opt = this.opt;

		var activateThis = false;
		if((opt['photo_active'] + 1) < opt['photo_total'])		
			activateThis = opt['photo_active'] + 1;
			
		// extra check waar hij sowieso langs zou moeten komen 
		// aangezien anders het navigatie pijltje niet zichtbaar zou moeten wezen
		if( activateThis !== false && 
			!this._runningEffect( 'effectM' + opt['photo_active'] ) && 
			!this._runningEffect( 'effectFA_' + opt['leftButton'] ) &&
			!this._runningEffect( 'effectFA_' + opt['rightButton'] )
		){	
			// fade the most left image to hidden
			var fadeThis = false;
			if((opt['photo_active'] - 1) >= 0) {
				fadeThis = opt['photo_active'] - 1;
			}
			
			var hideThis = false;
			if((opt['photo_active'] - 2) >= 0) {
				hideThis = opt['photo_active'] - 2;
			}
			
			if( fadeThis !== false )
			{
				$(opt['leftBox']).hide();
				this._morphWrap( fadeThis, opt['photo_pos_hidden_left'], 'L');  
				this._scaleImage( fadeThis, ((opt['photo_small_width'] / opt['photo_medium_width']) * 100), 'L' );
				this._appear(opt['leftBox']);
				$(opt['photo_wrap'] + fadeThis).setStyle({ zIndex: opt['photo_zindex_low'] });
			}		

			// move the active image to the left
			this._morphWrap( opt['photo_active'], opt['photo_pos_left'], 'L'); 
			this._scaleImage( opt['photo_active'], ((opt['photo_medium_width'] / opt['photo_max_width']) * 100), 'L' );
			$(opt['photo_wrap'] + opt['photo_active']).setStyle({ zIndex: opt['photo_zindex_medium'] });
			
			// make the right image the active one
			this._morphWrap( activateThis, opt['photo_pos_center'], 'L');  
			this._scaleImage( activateThis, ((opt['photo_max_width'] / opt['photo_medium_width']) * 100), 'L' );
			$(opt['photo_wrap'] + activateThis).setStyle({ zIndex: opt['photo_zindex_max'] });
			
			var appearThis = false;
			if((opt['photo_active'] + 2) < opt['photo_total']) {
				appearThis = opt['photo_active'] + 2;
				$(opt['photo_wrap'] + appearThis).setStyle({ zIndex: opt['photo_zindex_low'] });
			}
															
			if( appearThis !== false )
			{
				$(opt['rightBox']).show();	
				this._morphWrap( appearThis, opt['photo_pos_right'], 'L' );  
				this._scaleImage( appearThis, ((opt['photo_medium_width'] / opt['photo_small_width']) * 100), 'L' );	
				this._fade(opt['rightBox']);		
			}

			opt['photo_active'] = activateThis;
			
			if( hideThis !== false ) {
				$(opt['photo_wrap'] + hideThis).setStyle({ zIndex: opt['photo_zindex_hidden'] });
			}
			
			this._setText( activateThis );
			this._setButtons();
						
		}

	},
		
	_goRight: function()
	{	
		var opt = this.opt;
		
		var activateThis = false;
		if((opt['photo_active'] - 1) >= 0)
			activateThis = opt['photo_active'] - 1;

		// extra check waar hij sowieso langs zou moeten komen 
		// aangezien anders het navigatie pijltje niet zichtbaar zou moeten wezen
		if( activateThis !== false && 
			!this._runningEffect( 'effectM' + opt['photo_active'] ) && 
			!this._runningEffect( 'effectFA_' + opt['leftButton'] ) &&
			!this._runningEffect( 'effectFA_' + opt['rightButton'] )
		){	

			// fade the most right image to hidden
			var fadeThis = false;
			if((opt['photo_active'] + 1) < opt['photo_total']) {
				fadeThis = opt['photo_active'] + 1;
			}
			
			var hideThis = false;
			if((opt['photo_active'] + 2) < opt['photo_total']) {
				hideThis = opt['photo_active'] + 2;
			}
			
			if( fadeThis !== false )
			{
				$(opt['rightBox']).hide();
				this._morphWrap( fadeThis, opt['photo_pos_hidden_right'], 'R');  
				this._scaleImage( fadeThis, ((opt['photo_small_width'] / opt['photo_medium_width']) * 100), 'R' );
				this._appear(opt['rightBox']);
				$(opt['photo_wrap'] + fadeThis).setStyle({ zIndex: opt['photo_zindex_low'] });
			}		
	
			// move the active image to the left
			this._morphWrap( opt['photo_active'], opt['photo_pos_right'], 'R'); 
			this._scaleImage( opt['photo_active'], ((opt['photo_medium_width'] / opt['photo_max_width']) * 100), 'R' );
			$(opt['photo_wrap'] + opt['photo_active']).setStyle({ zIndex: opt['photo_zindex_medium'] });
			
			// make the right image the active one
			this._morphWrap( activateThis, opt['photo_pos_center'], 'R', opt['photo_zindex_max']);  
			this._scaleImage( activateThis, ((opt['photo_max_width'] / opt['photo_medium_width']) * 100), 'R' );
			$(opt['photo_wrap'] + activateThis).setStyle({ zIndex: opt['photo_zindex_max'] });
			
			var appearThis = false;
			if((opt['photo_active'] - 2) >= 0) {
				appearThis = opt['photo_active'] - 2;
				$(opt['photo_wrap'] + appearThis).setStyle({ zIndex: opt['photo_zindex_low'] });
			}
			
			if( appearThis !== false )
			{
				$(opt['leftBox']).show();	
				this._morphWrap( appearThis, opt['photo_pos_left'], 'R' );  
				this._scaleImage( appearThis, ((opt['photo_medium_width'] / opt['photo_small_width']) * 100), 'R' );	
				this._fade(opt['leftBox']);					
			}
			
			if( hideThis !== false ) {
				$(opt['photo_wrap'] + hideThis).setStyle({ zIndex: opt['photo_zindex_hidden'] });
			}
			
			opt['photo_active'] = activateThis;
			
			this._setText( activateThis );
			
			this._setButtons();
		}
	},
		
	_morphWrap: function( elementId, marginLeft, dir )
	{
		var opt = this.opt;
		
		this._cancelEffect('effectM' + elementId);
		
		new Effect.Morph(opt['photo_wrap'] + elementId, { 
			queue: { 
				position: 'front', 
				scope: 'effectM' + elementId, 
				limit: 4
			},
		  	style: 'margin:  0px 0px 0px ' + marginLeft + 'px; ',
		   	duration: opt['effect_timer']        
		}); 	
	},
	
	_scaleImage: function( elementId, scaleSize, dir )
	{
		var opt = this.opt;
		
		this._cancelEffect('effectS' + elementId);
		
		new Effect.Scale( opt['photo_image'] + elementId, scaleSize, { 
			queue: { 
				position: 'front', 
				scope: 'effectS' + elementId, 
				limit: 1 
			},
		   	duration: opt['effect_timer']  
		}); 	
	},
	
	_fade: function( element )
	{
		var opt = this.opt;
	
		new Effect.Fade(element, { 
			queue: { 
				position: 'front', 
				scope: 'effectFA_' + element.id, 
				limit: 1 
			} ,
		   	duration: opt['effect_timer']   
		});
	},
	
	_appear: function( element )
	{
		var opt = this.opt;
		
		new Effect.Appear(element, { 
			queue: { 
				position: 'front', 
				scope: 'effectAP_' + element.id, 
				limit: 1 
			} ,
		   	duration: opt['effect_timer']    
		});	
	}
};