/* 
*	dlc_Slideshow class
*	
*	
*	example :
*
<div id="ss_container"></div>
<script type="text/javascript">
	var dlc_ss;
	loadSlideshows = function() {
		dlc_ss = new dlc_SlideShow('dlc_ss');
		dlc_ss.id_Target = 'ss_container';
		dlc_ss.arr_Images.push(Array('http://path/to/full/size.jpg','http://path/to/thumb/size.jpg'));
		dlc_ss.arr_Images.push(Array('http://path/to/full/size.jpg','http://path/to/thumb/size.jpg'));
		dlc_ss.arr_Images.push(Array('http://path/to/full/size.jpg','http://path/to/thumb/size.jpg'));
		dlc_ss.arr_Images.push(Array('http://path/to/full/size.jpg','http://path/to/thumb/size.jpg'));
		dlc_ss.arr_Videos.push('http://path/to/video.flv');
		dlc_ss.populate();
	}
	cycleUntilReady(loadSlideshows);
</script>
*
*/

var dlc_SlideShow = Class.create({
	initialize: function(instanceName) {
		this.instanceName = instanceName;
		this.css_Stylesheet = 'dlc_slideshow';
		this.css_StylesheetLoaded = 'dlc_slideshow_off';
		this.id_Target = 'dlc_ss';
		this.container = false;
		this.arr_Images = Array();	// Array of images and stuff
		this.arr_Videos = Array();	// Array of videos, although only index 1 will be used intially
		this.align_hover = {vertical:'top',horizontal:'left'}; // Where to align the larger version
		this.dimensions = {large:{width:212,height:'auto'},small:{width:67,height:67}};
		this.show_Large = true;
		this.text_color = '#003399';
		this.text_font = 'Verdana,Arial,Sans-Serif';
		this.persist = 1;
		this.num_thumbs = 3;
		this.elements = {
			images:Array(),
			thumbs:Array(),
			videos:Array()
		}
	},
	populate: function() {
		// check container
		if (!this.container && $(this.id_Target)) this.container = $(this.id_Target);
		else return false;
		
		/*
		FRAME ->
			dNone :: imgholder
			dNone :: vidholder
			large image 
				(video overlay)
			thumbs (> 1)
			nav (> 3)
			rel/abs frame (shadow)
				shown frame
					title
						arrow
						close
					image/video
		*/
		
		// Check array length, make sure it's greater than 1 before doing anything
		if (this.container && this.arr_Images.length >= 1) {
			this.container.className = this.css_Stylesheet;
			this.container.style.width = this.dimensions.large.width+'px';
			this.container.style.height = 'auto';
			// Empty the node
			while(this.container.firstChild)this.container.removeChild(this.container.firstChild);
			
			// If desired, make an image element for large image
			if (this.show_Large) {
				if (this.arr_Videos.length > 0) {
					// Video overlay goes in here
					new_a = document.createElement('a');
						new_a.href = 'javascript:'+this.instanceName+'.show_video(0)';
						new_a.className = 'anchor_overlay';
						new_a.style.position = 'relative';
						new_a.style.display = 'block';
						new_a.style.zIndex = '25';
						new_a.style.top = '0px';
						new_a.style.left = '0px';
						new_a.style.height = '0px';
						new_a.style.width = '0px';
						new_img = document.createElement('img');
							new_img.className = 'vid_overlay';
							new_img.src = '/videoplayer/play_overlay.png';
							new_img.style.position = 'absolute';
							new_img.style.zIndex = '25';
							new_img.style.top = '0px';
							new_img.style.border = 'none';
							new_img.style.left = '0px';
							if(this.dimensions.large.height == 'auto'){
								new_img.style.height = this.dimensions.large.height;
							}else{
								new_img.style.height = this.dimensions.large.height+'px';
							}
							new_img.style.width = this.dimensions.large.width+'px';
						new_a.appendChild(new_img);
					this.container.appendChild(new_a);
				}
				new_img = document.createElement('img');
					new_img.src = this.arr_Images[0][0];
					new_img.className = 'img_large';
					if(this.dimensions.large.height == 'auto'){
						new_img.style.height = this.dimensions.large.height;
					}else{
						new_img.style.height = this.dimensions.large.height+'px';
					}
					new_img.style.width = this.dimensions.large.width+'px';
				this.container.appendChild(new_img);
			}
			
			// Show the thumb frame
			
			// Fill in the thumb frame
			for (i=0;i<=this.num_thumbs;i++) if (this.arr_Images[i]) this.load_image(i);
			if (this.arr_Images.length > (this.num_thumbs+1)) this.load_image(this.arr_Images.length-1);
			
			frameDiv = document.createElement('div');
				frameDiv.style.position = 'relative';
				frameDiv.style.zIndex = '24';
				new_div = document.createElement('div');
					new_div.className = 'thumb_frame';
					new_div.style.position = 'absolute';
					new_div.style.zIndex = '25';
					new_div.style.top = '0px';
					new_div.style.left = '0px';
					new_div.style.padding = '1px';
					for (i=0;i<this.num_thumbs;i++) if (this.elements.thumbs[i]) new_div.appendChild(this.elements.thumbs[i]);
				frameDiv.appendChild(new_div);
			this.container.appendChild(frameDiv);
			var navBarEle = this.container.select('.thumb_frame');
			spacer = document.createElement('div');
				spacer.style.height = navBarEle[0].clientHeight+'px';
			this.container.appendChild(spacer);
			
			// If there is more than 3 images then show navbar
			if (this.arr_Images.length > this.num_thumbs) {
				frameDiv = document.createElement('div');
					frameDiv.style.position = 'relative';
					frameDiv.style.zIndex = '24';
					new_div = document.createElement('div');
						new_div.className = 'navbar';
						new_div.style.position = 'absolute';
						new_div.style.zIndex = '25';
						new_div.style.top = '0px';
						new_div.style.left = '0px';
						new_div.style.width = this.dimensions.large.width+'px';
						new_div.style.color = this.text_color;
						new_div.style.fontSize = '11px';
						new_div.style.fontFamily = this.text_font;
						div_left = document.createElement('div');	
							div_left.style.cssFloat = 'left';	
							div_left.style.styleFloat = 'left';
							div_left.style.textAlign = 'left';
							div_left.style.width = '50px';
							new_a = document.createElement('a');
								new_a.href = 'javascript:'+this.instanceName+'.skip(-1);';
								new_img = document.createElement('img');
									new_img.src = '/images/chevrons_orange_previous.gif';
									new_img.style.border = 'none';
								new_a.appendChild(new_img);
							div_left.appendChild(new_a);
							new_a = document.createElement('a');
								new_a.href = 'javascript:'+this.instanceName+'.skip(-1);';
								new_a.style.color = this.text_color;
								new_a.innerHTML = '&nbsp;Prev';
								new_a.style.textDecoration = 'none';
							div_left.appendChild(new_a);
						new_div.appendChild(div_left);
						div_right = document.createElement('div');	
							div_right.style.cssFloat = 'right';
							div_right.style.styleFloat = 'right';
							div_right.style.textAlign = 'right';
							div_right.style.width = '50px';
							new_a = document.createElement('a');
								new_a.href = 'javascript:'+this.instanceName+'.skip(1);';
								new_a.style.color = this.text_color;
								new_a.innerHTML = 'Next&nbsp;';
								new_a.style.textDecoration = 'none';
							div_right.appendChild(new_a);
							new_a = document.createElement('a');
								new_a.href = 'javascript:'+this.instanceName+'.skip(1);';
								new_img = document.createElement('img');
									new_img.src = '/images/chevrons_orange.gif';
									new_img.style.border = 'none';
								new_a.appendChild(new_img);
							div_right.appendChild(new_a);
						new_div.appendChild(div_right);
						div_center = document.createElement('div');
							div_center.style.textAlign = 'center';
							div_center.innerHTML = this.arr_Images.length + ' images';
						new_div.appendChild(div_center);
					frameDiv.appendChild(new_div);
				this.container.appendChild(frameDiv);
				var navBarEle = this.container.select('.navbar');
				spacer = document.createElement('div');
					//spacer.style.height = navBarEle[0].clientHeight+'px';
					spacer.style.height = '13px';
				this.container.appendChild(spacer);
			}
			// Put in the image holder starting with the shadow
			anchor_div = document.createElement('div');
				anchor_div.style.position = 'relative';
				anchor_div.style.zIndex = '25';
				anchor_div.style.display = 'none';
				anchor_div.className = 'hover_anchor';
				anchor_div.style.top = '0px';
				anchor_div.style.left = '0px';
				shadow_div = document.createElement('div');
					shadow_div.style.zIndex = '1000';
					shadow_div.style.position = 'absolute';
					shadow_div.className = 'hover_shadow';
					shadow_div.style.top = '4px';
					shadow_div.style.left = '4px';
					shadow_div.style.zIndex='26';
					shadow_div.style.border = '1px solid #000000';
					shadow_div.style.background = '#000000';
				anchor_div.appendChild(shadow_div);
				frame_div = document.createElement('div');
					frame_div.className = 'hover_frame';
					frame_div.style.position = 'absolute';
					frame_div.style.top = '0px';
					frame_div.style.left = '0px';
					frame_div.style.zIndex='27';
					frame_div.style.backgroundColor = '#FFFFFF';
					frame_div.style.border = '1px solid #CCCCCC';
					frame_div.style.padding = '2px';
					title_div = document.createElement('div');
						title_div.className = 'hover_title';
						title_div.style.height = '11px';
						arrow_div = document.createElement('div');
							arrow_div.className = 'arrow_frame';
							arrow_div.style.width = (this.dimensions.large.width-2)+'px';
							arrow_div.style.position = 'absolute';
							arrow_div.style.top = '2px';
							if (this.align_hover.horizontal == 'right') arrow_div.style.right = '-3px';
							else arrow_div.style.left = '0px';
							arrow_img = document.createElement('img');
								arrow_img.className = 'arrow_img';
								arrow_img.src = '/images/ss_arrow.gif';
								arrow_img.style.position = 'absolute';
								arrow_img.style.top = '0px';
								arrow_img.style.left = '0px';
								arrow_img.style.border = 'none';
							arrow_div.appendChild(arrow_img);
						title_div.appendChild(arrow_div);
						new_a = document.createElement('a');
							new_a.href = 'javascript:'+this.instanceName+'.hide_frame();';
							img = document.createElement('img');
								img.style.position = 'absolute';
								img.style.top = '2px';
								img.style.right = '2px';
								img.src = '/images/ss_x.gif';
								img.style.border = 'none';
							new_a.appendChild(img);
						title_div.appendChild(new_a);
					frame_div.appendChild(title_div);
					img_div = document.createElement('div');
						img_div.style.textAlign = 'center';
						img_div.className = 'hover_imgframe';
					frame_div.appendChild(img_div);
				anchor_div.appendChild(frame_div);
			this.container.appendChild(anchor_div);
			
		}
		// Remove loading background image thru css
		this.container.className = this.css_StylesheetLoaded;
		//preload the images
		this.preloadImages();
	},
	skip:function(step) {
		// Jumps the thumbnails along
		// Get the thumbs
		var thumbs = this.container.select('.thumb_anchor');
		var thumbframe = this.container.select('.thumb_frame');
		var cycleThumbs = true;
		var showimgIndex = 'not_set';
		var img_frame = this.container.select('.hover_anchor');
		this.trigger_hiders();
		if (img_frame[0].style.display == 'block') {
			// If image frame currently being shown, get the next image loaded
			var img_anchor = this.container.select('.hover_imgframe a');
			if (img_anchor.length > 0) {
				showimgIndex = img_anchor[0].name;
				showimgIndex = showimgIndex*1 + step;
				for (i=0;i<thumbs.length;i++) if(thumbs[i].name == showimgIndex) cycleThumbs = false;
			}
		}
		if (cycleThumbs) {
			if (step > 0) {
				// shift to remove first element
				for (i=0;i<step;i++) {
					// First need to shift out first element
					thumbs.shift();
					// Then push in the new image
					img_index = thumbs[thumbs.length-1].name*1+1;
					while (img_index >= this.arr_Images.length) img_index = img_index - this.arr_Images.length;
					if (!this.elements.thumbs[img_index]) this.load_image(img_index);
					thumbs.push(this.elements.thumbs[img_index]);
				}
			} else {
				for (i=0;i>step;i--) {
					// pop to remove last element
					thumbs.pop();
					// Now unshift in first
					img_index = thumbs[0].name*1 - 1;
					while (img_index < 0) img_index = img_index + this.arr_Images.length;
					if (!this.elements.thumbs[img_index]) this.load_image(img_index);
					thumbs.unshift(this.elements.thumbs[img_index]);
				}
			}
			// Now get the frame cleared and append children
			while(thumbframe[0].firstChild)thumbframe[0].removeChild(thumbframe[0].firstChild);
			for (i=0;i<thumbs.length;i++) thumbframe[0].appendChild(thumbs[i]);
		}
		// Shift the image shown if applicable
		if (showimgIndex != 'not_set' && img_frame[0].style.display == 'block') this.show_image(showimgIndex);
	},
	resize_frame:function() {
		var shadow = this.container.select('.hover_shadow');
		var aframe = this.container.select('.hover_anchor');
		var oframe = this.container.select('.hover_frame');
		var iframe = this.container.select('.hover_imgframe img');
		var vframe = this.container.select('.hover_imgframe div');
		this.trigger_hiders();
		aframe[0].style.display='block';
		
		if (iframe.length > 0) targetW = (iframe[0].clientWidth*1)+'px';
//		else if (vframe.length > 0) targetW = (vframe[0].clientWidth*1)+'px';
		else if (vframe.length > 0) targetW = '480px';
		else targetW = 'auto';

		oframe[0].style.width = targetW;
		if (oframe[0].clientWidth < this.dimensions.large.width-8) oframe[0].style.width = (this.dimensions.large.width-8)+'px';
		
		shadow[0].style.width = oframe[0].clientWidth+'px';
		shadow[0].style.height = oframe[0].clientHeight+'px';
		shadow[0].setOpacity(0.5);
		if (this.align_hover.horizontal == 'right') aframe[0].style.left = Math.min(this.dimensions.large.width - oframe[0].clientWidth,0)+'px';
		else aframe[0].style.left = '0px';
		this.show_hidediv();
	},
	show_image:function(img_index) {
		// Clear the children of the frame, and copy from the elements array
		var frame = this.container.select('.hover_imgframe');
		var arrow = this.container.select('.arrow_img');
		var thumbs = this.container.select('.thumb_anchor');
		var arrow_frame = this.container.select('.arrow_frame');
		while(frame[0].firstChild){
				frame[0].removeChild(frame[0].firstChild);
		}
		while (img_index < 0) img_index = img_index + this.arr_Images.length;
		while (img_index >= this.arr_Images.length) img_index = img_index - this.arr_Images.length;
		
		if (!this.elements.images[img_index]) this.load_image(img_index);
		if (this.elements.images[img_index]) {
			frame[0].appendChild(this.elements.images[img_index]);
			this.resize_frame();
			// Position arrow
			for (tpos=0;tpos<thumbs.length;tpos++) if (thumbs[tpos].name == img_index) break;	
			arrow[0].style.left = ((this.dimensions.small.width+2)*(tpos+1) - (this.dimensions.small.width+2+arrow[0].clientWidth)/2)+'px';
			arrow_frame[0].style.display = 'block';
			this.resize_frame();
		} else this.hide_frame();
	},
	show_video:function(vid_index) {
		var frame = this.container.select('.hover_imgframe');
		if (frame.length > 0) while(frame[0].firstChild) frame[0].removeChild(frame[0].firstChild);
		if (!this.elements.videos[vid_index]) this.load_video(vid_index);
		if (this.elements.videos[vid_index]) {
			frame[0].appendChild(this.elements.videos[vid_index]);
			var arrow_frame = this.container.select('.arrow_frame');
			arrow_frame[0].style.display = 'none';
			setTimeout(this.instanceName+'.video_play()',1000);
			this.resize_frame();
			if(navigator.appName.indexOf("Microsoft Internet")>-1)document.getElementById("videoFrame").contentWindow.location.reload(1);
		} else this.hide_frame();
	},
	show_hidediv:function() {
		// If no hide div then make one
		if (!$('ss_hd_'+this.instanceName)) {
			new_hider = document.createElement('img');
				new_hider.src = '/images/spacer.gif';
				new_hider.id = 'ss_hd_'+this.instanceName;
				new_hider.className = 'hideDiv';
				new_hider.style.zIndex = '5';
				eval('new_hider.onclick = function(){'+this.instanceName+'.hide_frame();};');
			document.body.appendChild(new_hider);
		}
		// Show it
		if($('ss_hd_'+this.instanceName)) $('ss_hd_'+this.instanceName).style.display='block';
	},
	video_play:function() {
//		document.getElementById('videoFrame').window.getElementById('video').playVideo();
/*		var video_object = this.video_get();
		if (navigator.appName.indexOf("Microsoft Internet")==-1){
			try {video_object.playVideo()} catch (e) {setTimeout(this.instanceName+'.video_play()',1000);}
		}else{
			document.video.playVideo();
		}
*/
	},
	video_stop:function() {
/*		var video_object = this.video_get();
		if (navigator.appName.indexOf("Microsoft Internet")==-1){
			try {video_object.stopVideo()} catch (e) {setTimeout(this.instanceName+'.video_stop()',1000);}
		}else{
			document.video.stopVideo();
		}
*/
	},
	video_get:function() {
/*		var imgdiv = this.container.select('.hover_imgframe div');
		if (imgdiv.length > 0) {
			// Url of the video wanted
			var curIndex = imgdiv[0].name;
			// Normal loop
			if (navigator.appName.indexOf("Microsoft Internet")==-1) browserElement = 'embed'; else browserElement = 'object';
			var object_arr = this.container.select(browserElement);
			if (object_arr.length == 1) {
				return object_arr[0];
			} else if (object_arr.length > 1 && browserElement == 'param') {
				for (i=0;i<object_arr.length;i++) if(object_arr[i].name == 'movie') return object_arr[i];
			} else {
				// Fallover code, should not be needed
				try {
					if (document.embeds) {
						for(i=0;i<document.embeds.length;i++) {
							if (document.embeds[i].attributes.flashvars.firstChild.nodeValue == 'videos='+this.arr_Videos[curIndex]) {
								return document.embeds[i];
							}
						}
					}
				} catch (e) {}
			}
		}*/
		return false;
	},
	load_image:function(img_index) {
		// Check the image array for the image
		if (this.arr_Images[img_index]) {
			if (!this.elements.images[img_index]) {
				new_a = document.createElement('a');
					new_a.href = 'javascript:'+this.instanceName+'.hide_frame();';
					new_a.name = img_index;
					new_img = document.createElement('img');
						new_img.src = this.arr_Images[img_index][0];
						new_img.style.zoom = 1;
						new_img.style.border = 'none';
					new_a.appendChild(new_img);
				this.elements.images[img_index] = new_a;
			}
			if (!this.elements.thumbs[img_index]) {
				new_a = document.createElement('a');
					new_a.className = 'thumb_anchor';
					new_a.name = img_index;
					new_a.href = 'javascript:'+this.instanceName+'.show_image('+img_index+');';
					new_img = document.createElement('img');
						new_img.style.height = this.dimensions.small.height+'px';
						new_img.style.width = this.dimensions.small.width+'px';
						new_img.style.border = 'none';
						new_img.style.margin = '1px';
						new_img.src = this.arr_Images[img_index][1];
					new_a.appendChild(new_img);
				this.elements.thumbs[img_index] = new_a;
			}
		}
	},
	gen_param:function(name,value) {
		var parEl = document.createElement('param');
		//parEl.setAttribute(name, value);
		parEl.name = name;
		parEl.value = value;
		return parEl;
	},
	load_video:function(vid_index) {
		var htmlString = '';
		if (!this.elements.videos[vid_index] && this.arr_Videos[vid_index]) {
			this.elements.videos[vid_index] = document.createElement('div');
			this.elements.videos[vid_index].name = vid_index;
			var htmlString = '<iframe name="videoFrame" id="videoFrame" scrolling="no" width="480" height="270" frameborder="0" src="/videoplayer/iframe.cfm?videoURL='+this.arr_Videos[vid_index]+'""></iframe>';
			this.elements.videos[vid_index].innerHTML=htmlString;
		}
	},
	hide_frame:function() {
		var aframe = this.container.select('.hover_anchor');
		var frame = this.container.select('.hover_imgframe');
		while(frame[0].firstChild){
				frame[0].removeChild(frame[0].firstChild);
		}
		if ($('ss_hd_'+this.instanceName)) $('ss_hd_'+this.instanceName).style.display = 'none';
		aframe[0].style.display='none';	
	},
	trigger_hiders:function() {
		// Should be called if the elements being touched might be overriding another popups hide div
		if (typeof(hidePopups) != 'undefined') hidePopups(); // Checks for other popup hiders	
	},
	
	preloadImages:function(){
		//preload Images
		var lineImages = new Array();
		this.arr_Images.each(function(line,x){
			lineImages[x] = new Image();
			lineImages[x].src=line[0];
		});
	}
});