// ----------------------------------------
// CMSImageViewer.
// ----------------------------------------

var cmsViewer = null;

function CMSImageViewer(width,height,list)
{
	this.cmsWidth		   = width;				// Bildbreite
	this.cmsHeight		   = height;			// Bildhoehe
	this.cmsImages		   = list;				// Bilderliste
	this.cmsCurrent		   = 1;					// Index aktuelles Bild
	this.cmsCount		   = list.length / 4;	// Anzahl Bilder
	this.cmsImage		   = null;				// Bild-Element
	this.cmsScrollerLeft   = null;				// Scroller-Element
	this.cmsScrollerRight  = null;				// Scroller-Element
	this.cmsTitle		   = null;				// Titel-Element
	this.cmsGround		   = null;				// Ground
	this.cmsViewer		   = null;				// Viewer
	this.cmsThumbLeft	   = null;				// Thumbnail Scroller
	this.cmsThumbRight	   = null;				// Thumbnail Scroller
	this.cmsThumbnails	   = null;				// Thumbnailliste
	this.cmsThumbRow	   = null;				// Container
	this.cmsThumbOffset	   = 0;					// Offset
	this.cmsThumbOffsetMax = 0;					// Maximale Groesse
	this.cmsThumbSize	   = 0;					// Breite
	
// ----------------------------------------
// View zeigen.
// ----------------------------------------

	this.show = function()
	{
		var close,viewer,scroller,ground,image,label;
		var width,height;

		width							= this.cmsWidth  + 100
		height							= this.cmsHeight + 150;
		document.body.style.overflow	= "hidden";
		
		ground							= document.createElement("DIV");
		ground.style.width				= document.body.clientWidth;
		ground.style.height				= document.body.clientHeight;
		ground.style.backgroundColor	= "#000000";
		ground.style.opacity			= "0.7";
		ground.style.filter				= "alpha(opacity=70)";
		ground.style.position			= "absolute";
		ground.style.left				= document.body.scrollLeft;
		ground.style.top				= document.body.scrollTop;
		this.cmsGround					= ground;
	
		viewer							= document.createElement("DIV");
		viewer.style.width				= width;
		viewer.style.height				= height;
		viewer.style.backgroundColor	= "#353535";
		viewer.style.position			= "absolute";
		viewer.style.left				= document.body.scrollLeft + (document.body.clientWidth  - width) / 2;
		viewer.style.top				= document.body.scrollTop + 50;
		this.cmsViewer					= viewer;

		scroller						= document.createElement("IMG");
		scroller.style.top				= (height - 22) / 2;
		scroller.style.left				= 10;
		scroller.style.position			= "absolute";
		scroller.onclick				= CMSPreviousImage;
		this.cmsScrollerLeft			= scroller;
		viewer.appendChild(scroller);
	
		scroller						= document.createElement("IMG");
		scroller.style.top				= (height - 22) / 2;
		scroller.style.right			= 10;
		scroller.style.position			= "absolute";	
		scroller.onclick				= CMSNextImage;	
		this.cmsScrollerRight			= scroller;
		viewer.appendChild(scroller);
				
		image							= document.createElement("IMG");
		image.style.width				= this.cmsWidth;
		image.style.height				= this.cmsHeight;
		image.style.left				= 50;
		image.style.top					= 50;
		image.style.position			= "absolute";
		image.style.border				= "1px solid white";
		image.onclick					= CMSNextImage;
		this.cmsImage					= image;
		viewer.appendChild(image);
		
		label							= document.createElement("DIV");
		label.style.color				= "white";
		label.style.textAlign			= "center";
		label.style.fontFamily			= "Arial";
		label.style.fontSize			= 12;
		label.style.position			= "absolute";
		label.style.width				= this.cmsWidth;
		label.style.top					= 15;	
		label.style.left				= 50;
		this.cmsTitle					= document.createTextNode("");
		label.appendChild(this.cmsTitle);
		viewer.appendChild(label);
					
		close							= document.createElement("IMG");
		close.style.right				= 6;
		close.style.top					= 6;
		close.onclick					= CMSCloseView;
		close.src						= "cmspages/images/close.png";
		close.style.position			= "absolute";	
		close.style.cursor				= "pointer";
		viewer.appendChild(close);
		
		this.update();
		this.createThumbnails(viewer);
		document.body.appendChild(ground);
		document.body.appendChild(viewer);
		this.toggleSelect(1,1);
	} 
	
// ----------------------------------------
// Previews erstellen.
// ----------------------------------------

	this.createThumbnails = function(viewer)
	{
		var id,x,y,image;
		var w,faktor;
		var container,scroller;
		
		// --------------------------------
		// Container und Scroller
		// --------------------------------
	
		scroller						= document.createElement("IMG");
		scroller.style.left				= 10;
		scroller.style.bottom			= 40;
		scroller.style.position			= "absolute";
		scroller.onclick				= CMSThumbLeft;
		viewer.appendChild(scroller);
		this.cmsThumbLeft				= scroller;
		
		scroller						= document.createElement("IMG");
		scroller.style.right			= 10;
		scroller.style.bottom			= 40;
		scroller.style.position			= "absolute";
		scroller.onclick				= CMSThumbRight;
		viewer.appendChild(scroller);
		this.cmsThumbRight				= scroller;
		
		container						= document.createElement("DIV");
		container.style.border			= "1px solid #505050";
		container.style.overflow		= "hidden";
		container.style.position		= "absolute";
		container.style.left			= 50;
		container.style.top				= this.cmsHeight + 60;
		container.style.height			= 70;
		container.style.width			= this.cmsWidth;
		viewer.appendChild(container);
		this.cmsThumbnails				= container;
			
		container						= document.createElement("DIV");
		container.style.position		= "absolute";
		container.style.left			= 0;
		container.style.top				= 0;
		container.style.height			= 70;
		this.cmsThumbnails.appendChild(container);
		this.cmsThumbRow				= container;
		this.cmsThumbSize				= 10;
		
		// --------------------------------
		// Thumbnails
		// --------------------------------
		
		x		 = 10;
		y		 = 10;
		id		 = 0;
		rowwidth = x;
		
		for(var i=0; i < this.cmsCount; i++,id+=4)
		{	
			image					= document.createElement("IMG");
			image.id				= "IMG" + i;
			image.style.border		= "1px solid white";
			image.style.left		= x;
			image.style.top			= y; 
			image.style.position	= "absolute";
			image.style.cursor		= "pointer";
			image.src				= this.cmsImages[id];
			image.onclick			= new Function("CMSShowImage(" + (i+1) + ");");
			image.title				= this.cmsImages[id + 3];
			
			faktor					= 50 / this.cmsImages[id + 2]; 
			w						= parseInt(this.cmsImages[id + 1] * faktor);
			image.style.width		= w;
			image.style.height		= this.cmsImages[id + 2] * faktor;
				
			this.cmsThumbRow.appendChild(image);
			x += w + 10;
			this.cmsThumbSize += w + 10;
		}
		
		this.cmsThumbOffset = 0;
		
		if(this.cmsThumbSize > this.cmsWidth)
		{
			this.cmsThumbOffsetMax = this.cmsThumbSize - this.cmsWidth;
		}
		else this.cmsThumbOffsetMax = 0;
		
		this.cmsThumbRow.style.width = this.cmsThumbSize;
		this.updateThumbnails();
	}
	
// ----------------------------------------
// Anzeigenrefresh.
// ----------------------------------------

	this.updateThumbnails = function()
	{
		var index,path;
		
		if(this.cmsThumbSize - this.cmsThumbOffset > this.cmsWidth)
		{
			this.cmsThumbRight.src = "cmspages/images/next.png";
			this.cmsThumbRight.style.cursor = "pointer";
		}
		else 
		{
			this.cmsThumbRight.src = "cmspages/images/next_off.png";	
			this.cmsThumbRight.style.cursor = "default";
		}
		
		if(this.cmsThumbOffset > 0)
		{
			this.cmsThumbLeft.src = "cmspages/images/previous.png";
			this.cmsThumbLeft.style.cursor = "pointer";
		}
		else 
		{
			this.cmsThumbLeft.src = "cmspages/images/previous_off.png";
			this.cmsThumbLeft.style.cursor = "default";
		}
		
		this.cmsThumbRow.style.left = -this.cmsThumbOffset;
	}
	
// ----------------------------------------
// Aktuelles Bild markieren.
// ----------------------------------------

	this.toggleSelect = function(oldid,newid)
	{
		var name,image;
		
		name  = "IMG" + (oldid - 1);
		image = document.getElementById(name);
		if(image) image.style.border = "1px solid white";
		
		name = "IMG" + (newid - 1);
		image = document.getElementById(name);
		if(image) image.style.border = "1px solid red";
	}
	
// ----------------------------------------
// View schliessen.
// ----------------------------------------

	this.close = function()
	{
		this.cmsGround.parentNode.removeChild(this.cmsGround);
		this.cmsGround = null;
		this.cmsViewer.parentNode.removeChild(this.cmsViewer);
		this.cmsViewer = null;
	}
	
// ----------------------------------------
// Anzeigenrefresh.
// ----------------------------------------

	this.update = function()
	{
		var index,path;
		
		if(this.cmsCurrent + 1 <= this.cmsCount)
		{
			this.cmsScrollerRight.src = "cmspages/images/next.png";
			this.cmsScrollerRight.style.cursor = "pointer";
		}
		else 
		{
			this.cmsScrollerRight.src = "cmspages/images/next_off.png";	
			this.cmsScrollerRight.style.cursor = "default";
		}
		
		if(this.cmsCurrent - 1 >= 1)
		{
			this.cmsScrollerLeft.src = "cmspages/images/previous.png";
			this.cmsScrollerLeft.style.cursor = "pointer";
		}
		else 
		{
			this.cmsScrollerLeft.src = "cmspages/images/previous_off.png";
			this.cmsScrollerLeft.style.cursor = "default";
		}
		
		index					= (this.cmsCurrent - 1) * 4;
		path					= this.cmsImages[index];
		this.cmsImage.title		= path;
		this.cmsImage.src		= path;
		this.cmsTitle.nodeValue = this.cmsImages[index + 3] + " (" + this.cmsCurrent + "/" + this.cmsCount + ")";
		this.adjustImage(this.cmsImages[index + 1],this.cmsImages[index + 2]);
	}
	
// ----------------------------------------
// Bildgroesse berechnen.
// ----------------------------------------

	this.adjustImage = function(width,height)
	{
		var w,h,faktor,fx,fy;
		
		fx = this.cmsWidth  / width;
		fy = this.cmsHeight / height;
		
		if(fx < fy) faktor = fx;
			else faktor = fy;
			 
		w = width  * faktor;
		h = height * faktor;
		
		this.cmsImage.style.width  = w;
		this.cmsImage.style.height = h;
		this.cmsImage.style.left   = (this.cmsWidth  - w) / 2 + 50;
		this.cmsImage.style.top    = (this.cmsHeight - h) / 2 + 50;
	}
}

// ----------------------------------------
// Naechstes Bild zeigen.
// ----------------------------------------

function CMSThumbRight()
{	
	if(cmsViewer.cmsThumbOffset + 160 < cmsViewer.cmsThumbOffsetMax)
	{
		cmsViewer.cmsThumbOffset += 160;
	}
	else cmsViewer.cmsThumbOffset = cmsViewer.cmsThumbOffsetMax;
	
	cmsViewer.updateThumbnails();
}

// ----------------------------------------
// Naechstes Bild zeigen.
// ----------------------------------------

function CMSThumbLeft()
{	
	if(cmsViewer.cmsThumbOffset - 160 >= 0)
	{
		cmsViewer.cmsThumbOffset -= 160;
	}
	else cmsViewer.cmsThumbOffset = 0;
	
	cmsViewer.updateThumbnails();
}

// ----------------------------------------
// Naechstes Bild zeigen.
// ----------------------------------------

function CMSNextImage()
{
	var id;
	
	id = cmsViewer.cmsCurrent;
	
	if(cmsViewer.cmsCurrent + 1 <= cmsViewer.cmsCount)
	{
		cmsViewer.cmsCurrent += 1;
	}
		
	cmsViewer.toggleSelect(id,cmsViewer.cmsCurrent);
	cmsViewer.update();
}
	
// ----------------------------------------
// Vorheriges Bild zeigen.
// ----------------------------------------

function CMSPreviousImage()
{
	var id;
	
	id = cmsViewer.cmsCurrent;
	
	if(cmsViewer.cmsCurrent - 1 >= 1)
	{
		cmsViewer.cmsCurrent -= 1;
	}

	cmsViewer.toggleSelect(id,cmsViewer.cmsCurrent);
	cmsViewer.update();
}

// ----------------------------------------
// Bild anzeigen.
// ----------------------------------------

function CMSShowImage(id)
{
	cmsViewer.toggleSelect(cmsViewer.cmsCurrent,id);
	cmsViewer.cmsCurrent = id;
	cmsViewer.update();
}

// ----------------------------------------
// Viewer anzeigen.
// ----------------------------------------

function CMSCloseView()
{
	cmsViewer.close();
	document.body.style.overflow = "auto";
}

// ----------------------------------------
// ShowViewer.
// ----------------------------------------

function CMSShowViewer(docname,topic,width,height)
{
	var cmsdoc,list;

	cmsdoc		= cmsRuntime.getDocument(docname);
	list		= cmsdoc.getImageGroup(topic);
	cmsViewer	= new CMSImageViewer(width,height,list);
	
	cmsViewer.show();
}