function changeimage(change) 
{
	var prev = getEl('PreviewDiv');
	var upload = getEl('UploadDiv');
	var cancelUpload = getEl('CancelUploadDiv');

	if (change==true)
	{
		prev.style.display='none';
		upload.style.display='';
		cancelUpload.style.display='';
	}
	else
	{
		prev.style.display='';
		upload.style.display='none';
		cancelUpload.style.display='none';
	}
}

function img_over(thumb) {
	thumb.className = "img-on";
}

function img_out(thumb) {
	thumb.className = "img-off";
}

function img_select(id, newImageSrc, newImageFull)
{	
	var main = getEl('i');
	main.src = newImageSrc;
	
	var l = getEl('il');
	l.href = newImageFull;
}

function img_edit_select(id, newImageSrc, newtitle)
{	
	var main = getEl('i');
	main.src = newImageSrc;
	var title = getEl('ImageTitle');
	title.value = newtitle;
}

function getEl(id) {
	return document.getElementById(document.getElementById('prefix').value+id);
}


/* image slideshow javascript */
//image class
function ImageClass(){
	this.label='';
	this.extension='';
	this.description='';
	this.imgElement=null;
}

// addNamespace("ProductWiki.Web.Controls");
if(typeof ProductWiki == "undefined") ProductWiki={};
if(typeof ProductWiki.Web == "undefined") ProductWiki.Web={};
if(typeof ProductWiki.Web.Controls == "undefined") ProductWiki.Web.Controls={};
ProductWiki.Web.Controls.Slideshow = Class.create();
ProductWiki.Web.Controls.Slideshow.prototype = {
	/* PUBLIC */
	next: function() {
		if (this.images.length==1) {
			location.href=this.nextURL;
		}
		else {
			this.dehighlight(this.currentIndex);
			if (this.currentIndex < this.images.length-1)
				this.currentIndex++;
			else 
				this.currentIndex=0;
			this.redraw();
		}
	},
	previous: function() {
		this.dehighlight(this.currentIndex);
		if (this.currentIndex > 0)
			this.currentIndex--;
		else
			this.currentIndex=this.images.length-1;
		this.redraw();
		
	},
	jump: function(idx) {
		this.dehighlight(this.currentIndex);
		this.currentIndex=idx;
		this.redraw();
	},
	highlight: function(idx) {
		this.images[idx].imgElement.className = "img-on";
	},
	dehighlight: function(idx) {
		this.images[idx].imgElement.className = "img-off";
	},
	
	
	/* EVENT HANDLERS */
	clickGallery: function(event) {
		var idx=this.getThumb(event);
		this.jump(idx);
	},
	overGallery: function(event) {
		var idx=this.getThumb(event);
		if (idx!=this.currentIndex) this.highlight(idx);
	},
	outGallery: function(event) {
		var idx=this.getThumb(event);
		if (idx!=this.currentIndex) this.dehighlight(idx);
	},
	keyup: function(event) {
		switch(event.keyCode) {
			case 37:	//left
				if (this.images.length>1) this.previous();
				break;
			case 39:	//right
				if (this.images.length>1) this.next();
				break;				
		}
	},
	keydown: function(event) {
		switch(event.keyCode) {
			case 37:	//left
				return false;
				break;
			case 39:	//right
				return false;
				break;
		}
	},
	

	/* PRIVATE */
	redraw: function() {
		var img=this.images[this.currentIndex];
		this.currentImage.src=this.imageRoot+img.label+'-'+this.imageWidth+'-'+this.imageHeight+'.'+this.thumbExtension;
		this.detailLink.href='image/'+img.label.replace(/_/g,"-")+'.html';
		this.zoomLink.href=this.imageRoot+img.label+'.'+img.extension;
		this.imageInfo.innerHTML=img.description;
		if (img.description.length>0) 
		{this.imageInfo.style.display='';}
		else
		{this.imageInfo.style.display='none';}
		if (this.editLink!=null) this.editLink.href='image-edit/gbl_state_2/'+img.label.replace(/_/g,"-")+'.html';
		this.highlight(this.currentIndex);
	},
	buildArray: function(images,extensions) {
		if (images.length>0) {
			var labels = images.split(",");
			var types = extensions.split(",");
			var image;
			for (var i=0;i<labels.length;i++) {
				image = new ImageClass();
				
				//data
				image.label=labels[i];
				image.extension=types[i];
				var desc = document.getElementById('description_'+i);
				if (desc!=null) image.description=desc.value;
				
				//HTML control
				image.imgElement=document.getElementById('ss_img_'+i);
				
				//events
				if (image.imgElement!=null) {
					addEvent(image.imgElement, "click", this.clickGallery.bind(this));
					addEvent(image.imgElement, "mouseover", this.overGallery.bind(this));
					addEvent(image.imgElement, "mouseout", this.outGallery.bind(this));
				}
				
				//add to array
				this.images[i]=image;
			}
		}
	},
	getThumb: function(event) {
		//get HTML control
		var thumb=null;
		if (event.target) thumb = event.target;
		else thumb = event.srcElement; 
		
		//extract index from ID ss_img_IDX, IDX=0,1,...,n
		var parts = thumb.id.split("_");
		return parts[2];
	},
	
	/* INIT */
	load: function() {
		addEvent(window, "keyup", this.keyup.bind(this));
		addEvent(window, "keydown", this.keydown.bind(this));
		this.container.focus();
	},

	initialize: function(images,extensions,idx,nexturl) {
		//initiliaze
		this.currentIndex = idx;
		
		//constants
		this.thumbWidth = 80;
		this.thumbHeight = 60;
		this.imageWidth = 568;
		this.imageHeight = 426;
		this.imageRoot = '/upload/images/';
		this.thumbExtension = 'jpg';
		this.nextURL = nexturl;
		
		//build image array
		this.images = [];
		this.buildArray(images,extensions);
		
		//HTML controls
		this.container = document.getElementById('default-image');
		this.nextLink = document.getElementById('ss_next');
		this.previousLink = document.getElementById('ss_previous');
		this.currentImage = document.getElementById('ss_currentImage');
		this.zoomLink = document.getElementById('ss_zoom');
		this.detailLink = document.getElementById('ss_detail');
		this.editLink = document.getElementById('ss_edit');
		this.imageInfo = document.getElementById('ss_info');
		
		//events
		addEvent(this.nextLink, "click", this.next.bind(this));
		addEvent(this.previousLink, "click", this.previous.bind(this));
		addEvent(this.currentImage, "click", this.next.bind(this));
				
		//bind page load event
		addEvent(window, "load", this.load.bind(this));				
	}
};