/*
	***** Javascript mini slideshows *****
	
	Ties in with database output - recordset converted to string
	sql statement: SELECT smallimage, largeimage, alttext FROM tblSlideShows
	html: <div id=""ss""></div>
	example call to setup: setupMiniSlideShow('ss', 200, 'images/slideshows/', 'images/slideshows/enlarged/', 
		'" & rs.GetString(adClipString, , "','", "','", "") & "')
	Important bit is the field and column separators output a valid list of arguments
	Don't put any apostrophes in the alt text
*/
		
function setupMiniSlideShow(id, width, smalldir, largedir) {
	//imagelist arguments optional after named args - smallimage, largeimage, alt, smallimage...
	var divMSS = document.getElementById(id);
	divMSS.style.cssText = 'margin-right: -8px; float: right; position: relative; width: '+width+'px; display: block; background-color: #ccc; padding: 3px;';
	var html = '<img id="mssimg_'+id+'" src="'+smalldir+arguments[4]+'" border="0" vspace=0 hspace=0/>'
		+'<div id="mssnav_'+id+'" style="font-size: 12px; color: #666;	cursor: default;">'
		+'<span style="float:right; cursor: pointer;" id="mssenlarge_'+id+'">enlarge+</span>';
	var imagenum=1;
	for(var i=4; i< (arguments.length-1); i+=3) {
		html+='<span title="'+(arguments[i+2].length>0?arguments[i+2]:arguments[i+0])+'" style="cursor: pointer;" onclick="mssShowImage(\''+id+'\', \''+smalldir+arguments[i]+'\',\''+(arguments[i+1].length>0?largedir+arguments[i+1]:'')+'\',\''+(arguments[i+2].length>0?arguments[i+2]:arguments[i+1])+'\');">'+(imagenum++)+'</span> ';
	}	
	html+='</div>'
	divMSS.innerHTML = html;
	mssShowImage(id, smalldir+arguments[4], (arguments[4+1].length>0?largedir+arguments[4+1]:''));
}

function mssShowImage(id, smallimage, largeimage, alttext) {
	var img = document.getElementById('mssimg_'+id);
	var lrg = document.getElementById('mssenlarge_'+id);
	img.src = smallimage;
	img.alt = alttext;
	if(largeimage.length>0) {
		img.onclick=function() { mssShowLarge(largeimage, alttext); }
		img.style.cursor = 'pointer';
		lrg.onclick=function() { mssShowLarge(largeimage, alttext); }
		lrg.style.color = '#666';
	} else {
		img.onclick=null;
		img.style.cursor = 'default';
		lrg.onclick=null;
		lrg.style.color = '#999';
	}
}

function mssShowLarge(largeimage, alttext) {
	var divId = 'divLargeImage';
	var imgDiv = document.getElementById(divId);
	if(!imgDiv) {
		var container = document.getElementById('wrapper').parentNode;
		imgDiv = document.createElement('div');
		imgDiv.id=divId;
		container.appendChild(imgDiv);
	}
	imgDiv.innerHTML = '<img src="'+largeimage+'" style="cursor: pointer; border: 3px solid #ccc;" alt="'+alttext+' (Click to hide)"/>';
	imgDiv.style.cssText='position: absolute; top: 50px; left: 0px; z-index: 1000;text-align: center; width: 99%; '
		+'filter:progid:DXImageTransform.Microsoft.Shadow(color=\'#666666\', Direction=135, Strength=6);';
	imgDiv.childNodes[0].onclick=function() { this.parentNode.removeChild(this);};
}

/***** End of JS Mini slideshows *****/