/**
* Foto-Galerie-Handling
**/

var FflbOnsiteGalerie_Register = Array;

function FflbOnsiteGalerie(targetIdRef){
	
	// Register für alle Bilder einer Galerie:
	var imageRegister = new Array;
	
	// target:
	this.$t = $('#' + targetIdRef);
	
	FflbOnsiteGalerie_Register[targetIdRef] = this;
	
	/**
	* Methode um ein neues Bild einzufügen:
	**/
	this.addImage = function(imgUrlThumb, imgUrlLarge){
		
		// keys bauen:
		var tmpImg = new Array;
		tmpImg['img_thumb'] = imgUrlThumb;
		tmpImg['img_large'] = imgUrlLarge;
		
		// registrieren:
		imageRegister.push(tmpImg);
		
	}
	
	
	/**
	* Methode zum Aufbau der Bildinhalte (Scroller-Navi):
	**/
	this.render = function(){
		
		// large view spinner html:
		var spin = '<div class="spinner"><img src="images/fflb_onsite_gallery_spinner.gif" /></div>';
		
		// append the html:
		this.$t.children('div.largeview').append(spin);
				
		
		if(imageRegister.length > 0){
		
			// start loading the first large image:
			this.setLarge(0);
			
			// thumb x position:
			var thumbX = 0;
			
			// alle thumb-container bauen:
			for(var i in imageRegister){
				
				// thumb data:
				var thumb = imageRegister[i];
				
				// active thumb: different class:
				var activeClass = i == 0 ? ' thumb_active' : '';
				
				// thumb html:
				var thumbContainer   = '<div onmouseup="FflbOnsiteGalerie_Mapper(\'' + targetIdRef + '\', ' + i + ');" class="thumb' + activeClass + ' thid_' + i + '" style="left: ' + thumbX + 'px;">';
				thumbContainer      += '  <div class="thumbimage"><img src="' + thumb['img_thumb'] + '" /></div>';
				thumbContainer      += '  <div class="spinner"><img src="images/fflb_onsite_gallery_spinner.gif" /></div>';
				thumbContainer      += '</div>';
				
				// append the html:
				this.$t.children('div.controlrow').children('div.controls').children('div.items').append(thumbContainer);
				
				// x increment:
				thumbX += 68;
			}
			
			if(imageRegister.length > 4){
				this.$t.children('div.controlrow').children("div.controls").scrollable({ 
					size: 4,
					next: 'div.scroll_next', 
					prev: 'div.scroll_prev',
					speed: 120,
					disabledClass: 'scroll_disabled',
					activeClass: 'thumb_active'
				});
				this.$t.children('div.controlrow').children('div.scroll_prev').css('display', 'block');
				this.$t.children('div.controlrow').children('div.scroll_next').css('display', 'block');
			}	
			
		}
	}
	
	
	/**
	* Method setting the large image:
	**/
	this.setLarge = function(indexNo){
		this.$t.children('div.largeview').html('<img src="' + imageRegister[indexNo]['img_large'] + '" />');		
	}
	
	
}

function FflbOnsiteGalerie_Mapper(o, i){
	FflbOnsiteGalerie_Register[o].setLarge(i);
}