/**********************************************************************************
*
* Tracking Gallery für IVW und Google-Analytics-Erfassung
* Copyright: Computec Media AG 2010
* Author: buffed.de / Christian Zamora
* Version: 0.1.1 
*
*
**********************************************************************************/
// TO EDIT: IVW Tag für die Galerien
var galleryIVW_id = 'RC_BilderG';
// TO EDIT: Domainname für die Seite, auf der die Galerie verwendet wird (Ohne Kennzeichnung)
var galleryIVW_domain = 'buffed';
// TO EDIT: Google Analytics-Tag der Seite, auf der die Galerie verwendet wird
var galleryGA_id = "UA-1536541-14";
// TO EDIT: Pfad zum Loader-Bild
var galleryLoadingImagePath = 'http://www.buffed.de/images/ajax-loader2.gif'

// Sollte google analytics in der Seite VOR den Galerien eingebunden sein, 
// bitte die Zeile "var PageTracker;" LÖSCHEN.
// Ansonsten ab hier bitte nichts mehr bearbeiten
var pageTracker;
var galleryImageCache = {};

// Galerie Klasse
trackingGallery = function(galleryID) {
	
	if(!galleryID) galleryID = 'dummy';

	this.galleryID = galleryID;
	this.parentDivID = 'tracking-gallery-' + this.galleryID;

	this.currentPicture = 0;
	this.countPictures = imageList[this.galleryID].length;

	/**
	* DOM Helper functions
	*/
	// Function to create elements
	this._ce = function(elementType, opts) {
		
		var e = document.createElement(elementType);
		
		if(opts && typeof opts == 'object') {
			for(var ee in opts) {
				e.setAttribute(ee, opts[ee]);
			}
		}

		return e;
	}

	// Element exists? Return element object
	this._ee = function(id) {
	
		if(!id) return;

		if(document.getElementById(id)) {
			return document.getElementById(id);
		}

		return null;
	}
	
	/**********************************************************************************************
	* Erstellt den Navitationsheader
	* Das kann angepasst werden, aber die Navigationslinks/Pfeide benötigen die folgende Funktion:
	*   trg[ + this.galleryID + ].prev(true)
	*   trg[ + this.galleryID + ].next(true)
	*   .. to the Preview/Next links
	*
	* Übergabe von (true) gibt dem Script an, ob es sich um einen Userklick.
	**********************************************************************************************/
	this.buildNavigation = function() {

		var str = "<table class=\"com-line\" style=\"width:100%\">"
				+ "<tr>"
				+ "<td align=\"left\" width=\"25%\">"
				+ "<img id=\"prev-arrow-"
				+ this.galleryID
				+ "\" src=\"/fileadmin/js/carousel/bfd-arrow-left.png\" "
				+ "style=\"position:relative;cursor:pointer;\" "				
				+ "onClick=\"trg['"+this.galleryID+"'].prev(true)\" "
				+ "alt=\"Zurück\" title=\"Zurück\"/>"
				+ "</td>"
				+ "<td align=\"center\" width=\"50%\">"
				+ "<div style=\"text-align:center;color:#ffffff;\" id=\"indicator-"
				+ this.galleryID
				+ "\"></div>"
				+ "</td>"
				+ "<td align=\"right\" width=\"25%\">"
				+ "<img id=\"next-arrow-"
				+ this.galleryID
				+"\" src=\"/fileadmin/js/carousel/bfd-arrow-right.png\" "
				+ "style=\"position:relative;cursor:pointer;\" "
				+ "onClick=\"trg['"+this.galleryID+"'].next(true)\" "
				+ " alt=\"Weiter\" title=\"Weiter\"/>"
				+ "</td>"
				+ "</tr>"
				+ "</table>";

		var nav = this._ce('div');
		nav.className = 'tracking-gallery-nav';
		nav.innerHTML = str;
		
		return nav;
	}
	
	/************************************************************************************
	*
	* Shows the ajax loading image in the navigation
	*
	*************************************************************************************/
	this.showNavigationLoader = function(text) {
		
		var parent = this._ee('indicator-' + this.galleryID);		
		parent.innerHTML = "<img src=\""+galleryLoadingImagePath+"\" height=\"16\" "
					 + "width=\"16\" align=\"absmiddle\" />&nbsp;" 
					 + ((!text) ? 'Galerie wird geladen' : text) + "...";
	}
	
	/************************************************************************************
	*
	* Creates and shows the indicator area in the navigation
	*
	*************************************************************************************/
	this.showIndicator = function() {
		var parent = this._ee('indicator-' + this.galleryID);
		parent.innerHTML = 'Bild ' + (this.currentPicture+1) + ' von ' + this.countPictures;
	}
	
	/************************************************************************************
	*                                                                                    
	* Builds the galler body and loads the first image                                   
	*                                                                                    
	************************************************************************************/
	this.buildGalleryBody = function() {

		var bodyElement = this._ee(this.parentDivID);
		bodyElement.innerHTML = '';
		
		// Append Navigation
		bodyElement.appendChild(this.buildNavigation());
		
		// Build Bory
		var imageArea = this._ce('div', {id: 'tracking-gallery-body'});
		imageArea.className = 'tracking-gallery-body';		
		var imageTag = this._ce('img', {id: 'tracking-gallery-image-'+this.galleryID, name: 'tracking-gallery-image-'+this.galleryID});
		var imageLink = this._ce('a',{id: 'tracking-gallery-image-link-'+this.galleryID, href: '', title: '', target: '_top'})
		
		imageLink.appendChild(imageTag);		
		
		var imageTitle = this._ce('div');
		imageTitle.className = 'tracking-gallery-image-title';
		imageTitle.id = 'tracking-gallery-image-title-'+this.galleryID;
		
		imageArea.appendChild(imageLink);		
		bodyElement.appendChild(imageArea);
		bodyElement.appendChild(imageTitle);
		
		this.currentPicture = -1;
		this.next();
	}
	
	this.tracking = function() {
		var get_rand = "d=" + (Math.random()*100000);
		var get_referer = "r=" + escape(document.referrer);
		var countIVW = new Image(1,1);
		countIVW.src = "http://" 
					 + galleryIVW_domain 
					 + ".ivwbox.de/cgi-bin/ivw/CP/"
					 + galleryIVW_id 
					 + ";?" 
					 + get_referer 
					 + "&" 
					 + get_rand;
		
		countIVW.onload=function(){ countIVW.onload=null; }

		if(pageTracker) {
			try {
				pageTracker._trackPageview();
			} catch(err) {}
		}

	}

	/******************************************************************************************
	*                                                                                          
	* Loads the current picture and initializes the tracking function (expects at first load)
	* @param boolean click                                                                     
	*                                                                                          
	*******************************************************************************************/
	this.loadPicture = function(click) {
		
		if(this.currentPicture > (this.countPictures-1)) {
			this.currentPicture = 0;			
		}
		if(this.currentPicture < 0) {
			this.currentPicture = (this.countPictures-1);
		}
		
		this.showNavigationLoader('Bild ' + (this.currentPicture+1) + ' wird geladen');
		document.images["tracking-gallery-image-"+this.galleryID].src = galleryLoadingImagePath;

		var imageTag = this._ee('tracking-gallery-image-'+this.galleryID);
		var imageLink = this._ee('tracking-gallery-image-link-'+this.galleryID);
		var imageTitle = this._ee('tracking-gallery-image-title-'+this.galleryID);
		
		var cachedImage;
		
		if(!galleryImageCache[this.galleryID][this.currentPicture]) {
		
			cachedImage = new Image();
			cachedImage.src = imageList[this.galleryID][this.currentPicture];
			galleryImageCache[this.galleryID][this.currentPicture] = cachedImage;
			
			var co = this;
			
			cachedImage.onload = function() {
				document.images["tracking-gallery-image-"+co.galleryID].src = this.src;
			
				imageLink.href = urlList[co.galleryID][co.currentPicture];
				imageTitle.innerHTML = titleList[co.galleryID][co.currentPicture];			
			
				if(click === true) {
					co.tracking();
				}
			}
			
		}
		else {		
			cachedImage = galleryImageCache[this.galleryID][this.currentPicture];

			document.images["tracking-gallery-image-"+this.galleryID].src = cachedImage.src;
			
			imageLink.href = urlList[this.galleryID][this.currentPicture];
			imageTitle.innerHTML = titleList[this.galleryID][this.currentPicture];			
			
			if(click === true) {
				this.tracking();
			}

		}

		this.showIndicator();
	}

	/******************************************************************************************
	* Precache next image
	*/
	this.preCache = function(negative) {
	
		if(negative) {
			var maxInt = this.currentPicture;
			var nextIndex = this.currentPicture - 1;
		}
		else {
			var maxInt = this.currentPicture + 2;
			var nextIndex = this.currentPicture + 1;
		}
		
		if (this.currentPicture>=0 && (maxInt) < this.countPictures && galleryImageCache[this.galleryID]) {
			if(!galleryImageCache[this.galleryID][nextIndex]) {			
				cachedImage = new Image();
				cachedImage.src = imageList[this.galleryID][nextIndex];
				galleryImageCache[this.galleryID][nextIndex] = cachedImage;
			}
		}
	}

	/******************************************************************************************
	* Handler für Weiter klicken
	* @param boolean click
	*/
	this.prev = function(click) {
		this.currentPicture = this.currentPicture - 1;
		this.preCache(true);
		this.loadPicture(click);
	}
	
	/******************************************************************************************
	* Handler für Zurück klicken
	* @param boolean click
	*/
	this.next = function(click) {
		this.currentPicture = this.currentPicture + 1;		
		this.preCache();
		this.loadPicture(click);
	}
	
	/******************************************************************************************
	* Init Funktion
	*/
	this.init = function() {
		if((this._ee(this.parentDivID))) {
			if(!galleryImageCache[this.galleryID]) {
				galleryImageCache[this.galleryID] = [];
			}
			this.buildGalleryBody();
		}
	}
	
	this.init();
	
}

// Der Tricker für die Galerie-Klasse, um mehrfache Initiierungen unterscheiden zu können
// Kann umbenannt werden, sollte bei der Initiierung innerhalb der Seite aber dann auch angepasst werden
var trg = {};