$(function() {
	// constants
	var pause_string   = 'Pause';
	var start_string   = 'Start';
	var caption_pad    = 10;
	var thumb_pad      = 10;
	
	// variables
	var id             = slide_data['id'];
	var width          = slide_data['width']  || 530;
	var height         = slide_data['height'] || 300;
	var scale          = slide_data['scale']  || 7;
	var x_offset       = (slide_data['x'] == undefined) ? 80 : slide_data['x'];
	var y_offset       = (slide_data['y'] == undefined) ? 80 : slide_data['y'];
	var view_width     = slide_data['thumb_width']  || 45;
	var view_height    = slide_data['thumb_height'] || 30;
	var interval       = slide_data['interval']     || 6000;
	var more           = (slide_data['more'] == undefined) ? 
	                     'Read more…' : slide_data['more'];
	var show_thumb     = (slide_data['show_thumb'] == undefined) ? 1 : slide_data['show_thumb'];
	var show_caption   = (slide_data['show_caption'] == undefined) ? 1 : slide_data['show_caption'];
	var show_pause     = (slide_data['show_pause'] == undefined) ? 1 : slide_data['show_pause'];
	var data           = slide_data['data'];
	var border_color   = slide_data['border_color'] || '#cccccc';
	var caption_height = slide_data['caption_height'] || 30;
	var vertical_align = (slide_data['vertical_align'] == undefined) ? 
	                     0 : slide_data['vertical_align'];
	var slide_html     = '<div class="slide_container">';
	var img_html       = '';
	var caption_html   = '';
	var thumb_html     = '';
	var ps_html        = (show_pause == 1) ? 
	                     '<div id="pause_start"><a href="javascript: return false;">' +
	                     pause_string + '</a></div>' : '';
	var num_of_slide   = data.length;
	
	// using the data, dynamically create the slide show html code
	for(var i = 0; i < num_of_slide; i++) {
	
		var counter = i + 1;
		
		img_html = img_html + '<a href="' + data[i][2] + '"><img id="slide' + counter + 
		  	'" class="slide_photo" src="' + data[i][0] + '" width="' + width + '" height="' + 
			height + '" alt="Slide ' + counter + '" /></a>';
	
		if(show_caption) {
			caption_html = caption_html + '<div id="caption' + counter + 
				'" class="caption_link"><a href="' + data[i][2] + '">' + data[i][1] + ' <em>' + 
				more + '</em>' + '</a></div>';
		}
		
		if(show_thumb) {
			var thumb_width  = Math.floor(width / scale);
			var thumb_height = Math.floor(height / scale);
		
			thumb_html = thumb_html + 
				'<div id="thumb_div' + counter + '" class="thumb_div"><div id="thumbnail_cover' + 
				counter + '" class="thumbnail_cover"></div><img id="thumbnail' + counter +
				'" class="thumbnail" src="' + data[i][0] + '" width="' + thumb_width +
				'" height="'+ thumb_height + '" alt="Thumbnail ' + counter + '" /></div>';
		}
	}
	
	// create the captions
	if(show_caption) {
		caption_html = '<div class="caption_container">' + caption_html + '</div>';
	}
	
	// create the thumbnails
	if(show_thumb) {
		thumb_html = '<div class="thumb_container">' + thumb_html + ps_html + '</div>';
		
		var thumb_offset_x = -(Math.floor(x_offset / scale));
		var thumb_offset_y = -(Math.floor(y_offset / scale));
	}
	
	slide_html += img_html + caption_html + '</div>' + thumb_html; 

	// add code to div
	$('#' + id).html(slide_html);

	var num           = 1;
	var timer         = null;

	// show the slide show
	$('.slide_frame').removeClass('hidden');
	
	// hide everything first
	$('.slide_photo').hide();
	$('.caption_link').hide();

	// show the first slide and caption
	$('#slide' + num).show();
	$('#caption' + num).show();
	//$('#thumb_div' + num).css('border', 'solid 1px #ff0000');
	$('#thumbnail_cover' + num).css('display', 'none');
	
	// the cursor of the nav
	$('.thumb_div').hover(function() {
		$(this).css('cursor', 'pointer');
	});
	
	// horizontal style of the slide show
	if(vertical_align == 0) {
	
		$('#' + id).css('width', width + 'px');
		$('#' + id + ' .slide_container').css('height', height + 'px');
		$('.slide_frame').css('border', 'solid 1px ' + border_color);
		
		$('.slide_frame .caption_container').css({ 
			'width':        width + 'px', 
			'height':       caption_height + 'px',
			'top':          (height - caption_height) + 'px',
			'line-height':  caption_height + 'px'
		});
		
		$('.caption_container .caption_link').css({ 'padding-left': caption_pad + 'px' });
		$('#textbox div#pause_start').css({ 'height': view_height + 'px' });
		$('#textbox div#pause_start a').css({ 'line-height': view_height + 'px' });
		
		if(show_thumb && (num_of_slide * (view_width + thumb_pad)) > width) {
			thumb_container_height = view_height * 2 + thumb_pad;
			$('.thumb_div').css({
				'margin-bottom': thumb_pad + 'px'
			});
		} else {
			thumb_container_height = view_height;
		}
		
		$('.slide_frame .thumb_container').css({
			'height':  thumb_container_height + 'px',
			'padding': thumb_pad + 'px'
		});
		
		$('.slide_frame .thumb_container .thumb_div').css({
			'width': view_width + 'px',
			'height': view_height + 'px'
		});
		
		$('.thumbnail_cover').css({
			'width': view_width + 'px',
			'height': view_height + 'px'
		});
	}
	// vertical style of the slide show
	else {
	
		if(!show_thumb) {
			view_width = 0;
			thumb_pad  = 0;
		}
	
		$('#' + id).css({
			'width':  (width + view_width + 2 * thumb_pad) + 'px',
			'height': height + 'px'
		});

		$('.slide_frame').css('border', 'solid 1px ' + border_color);
		
		
		$('#' + id + ' .slide_container').css({ 
			'width':  width + 'px', 
			'height': height + 'px'
		});

	
		$('.slide_frame .thumb_container').css({
			'height':  (height - 2 * thumb_pad) + 'px',
			'width':   view_width + 'px',
			'padding': thumb_pad + 'px'
		});
		
		$('.slide_frame .thumb_container .thumb_div').css({
			'width': view_width + 'px',
			'height': view_height + 'px'
		});
		
		$('.thumbnail_cover').css({
			'width': view_width + 'px',
			'height': view_height + 'px'
		});
		
		$('.slide_frame .caption_container').css({ 
			'width':        width + 'px', 
			'height':       caption_height + 'px',
			'top':          (height - caption_height) + 'px',
			'line-height':  caption_height + 'px'
		});
		
		$('.caption_container .caption_link').css({ 'padding-left': caption_pad + 'px' });



	}
	
	
	
	// set the offsets to show thumbs
	if(show_thumb) {
		$('.slide_frame .thumb_container .thumb_div .thumbnail')
			.css({ marginLeft:thumb_offset_x + 'px', marginTop:thumb_offset_y + 'px' });
	}
	
	// load the current slide
	loadSlide(num);
	
	// handler for clicking the thumbnail
	$('.thumb_div').click(function() {
	
		var id_string = ($(this).attr('id'));
		var id = id_string.substr(9); // thumb_divD
	
		$('#slide' + num).fadeOut('slow');
		$('#caption' + num).fadeOut('slow');
		$('#thumbnail_cover' + num).css('display', 'block');
		
		num = parseInt(id);
		
		$('#slide' + num).fadeIn('slow');
		$('#caption' + num).fadeIn('slow');
		$('#thumbnail_cover' + num).css('display', 'none');
		
		$('#pause_start a').html('Pause');
		clearInterval(timer);
		timer = null;
		
		loadSlide(num);
	});
	
	// handler for clicking the Start/Pause button
	$('#pause_start').click(function() {
	
		var link_text = $('#pause_start a').text();
		
		if (link_text == 'Pause') {
			$('#pause_start a').html('Start');
			clearInterval(timer);
			timer = null;
		} else {
			$('#pause_start a').html('Pause');
			loadSlide(num);
		}
	});

	// the rotating function
	function loadSlide(current) {
	
		timer = setInterval(function() {
			next = (current + 1) % num_of_slide;
			
			if(next == 0) {
				next = num_of_slide;
			}
		
			$('#slide' + current).fadeOut('slow');
			$('#caption' + current).fadeOut('slow');
			//$('#thumb_div' + current).css('border', 'solid 1px #cccccc');
			$('#thumbnail_cover' + current).css('display', 'block');
			
			$('#slide' + next).fadeIn('slow');
			$('#caption' + next).fadeIn('slow');
			//$('#thumb_div' + next).css('border', 'solid 1px #ff0000');
			$('#thumbnail_cover' + next).css('display', 'none');
			
			num     = next;
			current = next;
		}, interval);
	}
});