//
//  Colorize!
//  
//
//  Created by Dave Ferner on 31/07/2010.
//  Copyright 2010 Supermono Ltd. All rights reserved.
//

// some constants, or kinda, anyway
var IMAGE_PREFIX_STRING				= 'images/graphics/icon_00';
var UNLIT_PREVBUTTON				= 2;
var UNLIT_SELECTED_SLIDEBUTTON		= 3;
var UNLIT_UNSELECTED_SLIDEBUTTON	= 4;
var UNLIT_NEXTBUTTON				= 5;
var LIT_PREVBUTTON					= 6;
var LIT_SELECTED_SLIDEBUTTON		= 7;
var LIT_UNSELECTED_SLIDEBUTTON		= 8;
var LIT_NEXTBUTTON					= 9;

// create an array of all the slideshow objects on the page
var slideShows = [];

/* a simple slide class */
function slide(image, caption)
{
	this.image = image;
	this.caption = caption;
}

/* a simple slide class */
function slideShow(id, slideArray, palette)
{

	this.id				= id;
	this.iSlide			= 0;
	this.palette		= palette;
	this.slideArray		= slideArray;
	this.incrementSlide = incrementSlide;
	this.decrementSlide = decrementSlide;
	this.setSlide		= setSlide;
	this.update			= update;
	
	function incrementSlide()
	{
		this.iSlide ++;
		this.iSlide %= this.slideArray.length;
		this.update();
		//alert('incrementing slide on slideshow ' + this.id + ', slide is now ' + this.iSlide);
	}
	
	function decrementSlide()
	{
		this.iSlide --;
		if (this.iSlide < 0) this.iSlide = this.slideArray.length-1;
		this.update();
		//alert('incrementing slide on slideshow ' + this.id + ', slide is now ' + this.iSlide);
	}
	
	function setSlide(n)
	{
		if (n >= 0 && n < this.slideArray.length)
		{
			this.iSlide = n;
			this.update();
		}
	}
	
	function setImage(id, image)
	{
		alert('setting image of ' + id + ' to ' + image);
		document.getElementById(id).src = image;
	}
	
	function update()
	{

		// set the image to the correct one
		var img = document.getElementById('slideShow' + this.id + '_image');
		img.src = (this.slideArray[this.iSlide].image);
		
		// set the caption
		var caption = document.getElementById('slideShow' + this.id + '_caption');
		caption.innerHTML = (this.slideArray[this.iSlide].caption);
		
		//update the slider bar thing, setting all to unselected except the current one!
		var i = 0;
		var imagePathString	= IMAGE_PREFIX_STRING + palette;		// select according to palette
		for (i=0; i<slideArray.length; i++)
		{
			var iControlID  = 'slideShow' + this.id + '_' + i;
			iControl = document.getElementById(iControlID);
			
			if (!iControl) alert('Slide control not found: ' + iControlID);
			if (i!=this.iSlide)
			{				
				// if it's not the current slide, make it like this
				iControl.setAttribute("onmouseover", 'javascript:document.getElementById(\'' + iControlID + '\').className = \'selectbutton_unselected_lit\';');
				iControl.setAttribute("onmouseout",  'javascript:document.getElementById(\'' + iControlID + '\').className = \'selectbutton_unselected_unlit\';');
				iControl.className = 'selectbutton_unselected_unlit';
			}
			else
			{
				iControl.setAttribute("onmouseover", 'javascript:document.getElementById(\'' + iControlID + '\').className = \'selectbutton_selected_lit\';');
				iControl.setAttribute("onmouseout",  'javascript:document.getElementById(\'' + iControlID + '\').className = \'selectbutton_selected_unlit\';');
				iControl.className = 'selectbutton_selected_unlit';
			}
		}
	}
}



/* generates html and javascript for a slideshow button*/
function generateHTMLButtons(id, slideArray, palette)
{
	var html			= '';
	var slideShowName	= 'slideShow' +  id +'_';
	var imagePathString	= IMAGE_PREFIX_STRING + palette;		// select according to palette
	var objectName		= 'slideShows[' + id + ']';				// name of the class in the array
	
	// add the first button
	html += ' <ul class="iconmenu">';
	html += '<li class = "prevbutton_unlit"					id = "' + slideShowName +'left" onmouseover = "javascript:document.getElementById(\'' + slideShowName + 'left\').className = \'prevbutton_lit\';" onmouseout = "javascript:document.getElementById(\'' + slideShowName + 'left\').className = \'prevbutton_unlit\';" > <a href= "javaScript:' + objectName + '.decrementSlide();"></a></li>';

	// add all the slides
	var iSlide = 0;
	for (iSlide = 0; iSlide < slideArray.length; iSlide++)
	{
		slideName =  slideShowName + iSlide;
		html += '<li class = "selectbutton_unselected_unlit" '
		     +  'id = "' + slideName +'" '
			 +	'>'
			 +	'<a href= "javaScript:' + objectName + '.setSlide(' + iSlide + ');"></a></li>';
	}
	
	// add the last button
	html += '<li class = "nextbutton_unlit"					id = "' + slideShowName +'right" onmouseover = "javascript:document.getElementById(\'' + slideShowName + 'right\').className = \'nextbutton_lit\';" onmouseout = "javascript:document.getElementById(\'' + slideShowName + 'right\').className = \'nextbutton_unlit\';" > <a href= "javaScript:' + objectName + '.incrementSlide();"></a></li>';

	html += '</ul>';
	
	
	
	return html;
}


/* generates html and javascript for slideshow */
function makeSlideShow(slideArray, palette)
{
	// check we got some slides!
	if (slideArray.length < 1)
	{
		alert("No slides in slideshow!");
		return;
	}
	
	
	// create a new slide show from our info and add it to the array
	id = slideShows.length;
	slideShows.push(new slideShow(id, slideArray, palette));
	
	
	// build the html string
	html =	'<div class = "pictureFrame color_3">'													+								
	'	<a href="javaScript:slideShows[' + id + '].incrementSlide()"><img src = "' + slideArray[0].image + '" class = "centred" id = "slideShow' + id + '_image"/></a>	'						+
			'</div>'																				+
			//'<div class = "slideShowControls">'														+
				generateHTMLButtons(id, slideArray, palette)												+ 
			//'</div>'																				+
			// add the caption
			'<div class = "imageCaption" id = "slideShow' + id  + '_caption">'						+
			''																						+
			'</div>';

	// write the html to the page	
	document.write(html);
	
	slideShows[id].update();
}



	/*bg = document.getElementById("testText");
	if (bg.innerHTML == "It didn't work")
	{
		bg.innerHTML = "It worked";
	}
	else
	{
		bg.innerHTML = bg.innerHTML + " again";
	}
	
	
	
	// change colors!
	if (iCol == 0)
	{
		newCol = "#FF00AA";
		iCol++;
	}
	else
	{
		newCol = "#888888";
		iCol = 0;
	}
	bg = document.getElementById("box_background");
	fg = document.getElementById("box_3column");
	fg.style.backgroundColor = newCol;
	bg.style.backgroundColor = "blue";
	

}
*/

/*


var iImage = 0;
var slides = new Array(5);
var captions = new Array(slides.length);
slides[0] = "No 5 v01 046.jpg";			captions[0] = "Page 46 of Taiyo Matsumoto's Number Five";
slides[1] = "No 5 v01 047.jpg";			captions[1] = "Page 47 of Taiyo Matsumoto's Number Five";
slides[2] = "No 5 v01 048.jpg";			captions[2] = "Page 48 of Taiyo Matsumoto's Number Five";
slides[3] = "No 5 v01 049.jpg";			captions[3] = "Page 49 of Taiyo Matsumoto's Number Five";
slides[4] = "No 5 v01 050.jpg";			captions[4] = "Page 50 of Taiyo Matsumoto's Number Five. Awesome captions!";


function updateSlide()
{
	//alert("updating");
	img = document.getElementById("slideshow");
	img.src = ("slideshow/" +slides[iImage]);
	//alert(iImage);
	
	//update the slider bar thing
	slideShowControls = document.getElementById("slideShowControls");
	slideShowControls.innerHTML = slideNumbers();
}

					
					
function slideNumbers()
{
	// returns an HTML formatted string of the slide numbers
	var slideLabels = "";
	slideLabels += "<a href = \"javascript:decrementSlide();\">< </a>";  // puts a '<' at the start
	var i = 0;
	for (i = 0; i < slides.length; i++)
	{
		if (i == iImage)
		{
			slideLabels += "<strong><i>";
		}
		slideLabels += "<a href = \"javascript:setSlide(" + i + ");\">" + i + " </a>";
		if (i == iImage)
		{
			slideLabels += "</i></strong>";
		}
	}
	slideLabels += "<a href = \"javascript:incrementSlide();\"> > </a>";  // puts a '>' at the end
	slideLabels += "   " + captions[iImage];	// put the caption after!
	
	return slideLabels;
}

function decrementSlide()
{
	iImage --;
	if (iImage < 0) iImage += slides.length;
	updateSlide();
}

function incrementSlide()
{
	iImage ++;
	iImage %= slides.length;
	updateSlide();
}
function setSlide(n)
{
	iImage = n;
	updateSlide();
}



// get DHTML shit
var DHTML = (document.getElementById || document.all || document.layers);
if (!DHTML)
{
	alert("browser does not support dhtml");
}
else
{
	//alert("Got DHTML, id is ", DHTML);
}
*/