imgObj = new Array(), imgSize = new Array();
i=0, count=0, loaded = new Array(), loadedImageSize=0, totImgSize=0, imagePreloaded='';	

var image_array = new Array();
var json_url = base_url + "/story/viewjson/";
var url = json_url + story_id;
/*
 * Retrive all the story data from server
 */
$.getJSON(url, function(data) {
	
	story_data = data;
	
	// Create a player
	initialize_html_elements();
	
	// Preload images if any
	var all_image = getImageURL();
	if( all_image.length ) {
		/*
		 * Initial story components are loaded after preloading and
		 * Control Events are binded 
		 */
		var preload_obj = new ImagePreload( all_image, onLoading, onCompletion );
	}	
	else {
		/*
		 * Load the story components like description and embed code
		 * Description is rendered on every slide
		 */
		load_initial_story_component();
		control_event_handler();
	}
	
});


function getImageURL() {
	var bg_path = "", act_path = "", cover_path = "";
	var bg_src = "", act_src = "", cover_src = "";
	var count = 0;
	var all_image = new Array(), image_dimension = new Array();;
	
	if( story_data.cover_image ) {
		cover_path = "%s/imagecache/slideshow/storycover/%s/%s";
		//cover_path = "%s/public/images/storycover/%s/%s";
		cover_src = $.sprintf( cover_path, base_url, story_data.user, story_data.cover_image );
		
		all_image[count++] = cover_src;
	}
	
	$.each(story_data.slide, function(sl_k, sl_v) {
		image_dimension = new Array();
		if(sl_v.background) {
			//bg_path = "%s/public/images/backgrounds/%s/%s";
			bg_path = "%s/imagecache/slideshow/backgrounds/%s/%s";
			bg_src = $.sprintf(bg_path, base_url, story_data.user, this.background.bg_image_file_name);
			
			all_image[count++] = bg_src;
			
		}		
		if(sl_v.actors) {
			$.each(sl_v.actors, function(act_k, act_v) {
				image_dimension = new Array();
				//act_path = "%s/public/images/actors/%s/%s";
				act_path = "%s/imagecache/thumbnail3/actors/%s/%s";
				act_src = $.sprintf(act_path, base_url, story_data.user, this.actor_image_file_name);
				
				all_image[count++] = act_src;
			});
		}
		
	});
	
	return all_image;
	
}

function onLoading() {
	var update_status_div = '<div class="preload-status" style="position:relative; top:200px; left:185px; border:1px solid; height:15px; width:150px; opacity:0.4;filter:alpha(opacity=40)"></div>';
	var update_status_content = '<span class="preload-text">  Loading Images </span><span class="current-image"></span><span class="total-image"></span>';
	//var update_skip = '<div id="skip-preload">Skip</div>';
	
	if( $('div#canvas-visible-slide').length ) {
		if( !$('div.preload-status').length ) {
			$('#canvas-visible-slide').append(update_status_div);
			$('div.preload-status').append(update_status_content);
			//$('div.preload-status').append(update_skip);
			
			$('div.preload-status span.total-image').text("/"+this.m_nICount);
		}
		
		$('span.current-image').text(this.m_nLoaded + 1);
		$('div#skip-preload').bind('click', function(){
			skip_preload = true;
			onCompletion();
		});
	}
	
}
//function OnImgUpdate( iProgress )
//{  
//	
//   if( (iProgress >= 1) && (iProgress <= 10) && (iProgress > g_iStep) )
//   {  
//       g_iStep++;
//       var oSpan = document.getElementById( "sDot" + iProgress + "" );
//       oSpan.className = 'FullDot';
//   }
//}

function onCompletion()
{  
	story_data.preloadComplete = this.m_bPreloadComplete;
	var canvas_visible_height = $('#canvas-visible-slide').height();
	var canvas_visible_width = $('#canvas-visible-slide').width();
	//if( !skip_preload ) {	
	//var story_cover_image = '<img class="story-cover-image" src="%s/public/images/storycover/%s/%s" style="height:%s; width:%s;" />';
//	var story_cover_image = '<img class="story-cover-image" src="%s/imagecache/slideshow/storycover/%s/%s" style="height:%s; width:%s;" />';
//	$('#canvas-visible-slide-inner-content-image-color').prepend( $.sprintf(story_cover_image, base_url, story_data.user, story_data.cover_image, canvas_visible_height, canvas_visible_width) );
	//}
	load_initial_story_component();
	control_event_handler();
	
	$('div.preload-status').remove();
}

function storyboard_clear_container() {
	
//	$('#canvas-visible-slide-inner-content-image-color').html("");
//	$('#canvas-visible-slide-inner-content-dialog-inner').html("");
//	$('#canvas-visible-description-content .description-content').text("");
	
	$.each($('#canvas-visible-slide-inner-content-image-color').children(), function() {
		$(this).remove();
	});
	$('#canvas-visible-slide-inner-content-dialog-inner').html("");
	$('#canvas-visible-description-content .description-content').text("");
  
}

function initialize_html_elements() {
	// Declare and initialize the html tree structure
	var canvas = '<div id="canvas" class="canvas"></div>';
	var canvas_visible = '<div id="canvas-visible" class="canvas-visible"></div>';
	var canvas_visible_inner = '<div id="canvas-visible-inner" class="canvas-inner"></div>';
	var canvas_visible_inner_content = '<div id="canvas-visible-inner-content" class="canvas-inner-content"></div>';
	
	// Story Title
	var canvas_story_title = '<div id="canvas-visible-story-title" class="canvas-story-title"></div>';
	var canvas_story_title_content = '<div id="canvas-visible-story-title-content" class="canvas-story-title-content"><h1 class="story-title-content"></h1></div>';
	
	// Story Creator and Created Date
	var canvas_story_creator = '<div id="canvas-visible-story-creator" class="canvas-story-creator"><span class="creator-content"></span></div>';
	var canvas_story_date = '<div id="canvas-visible-story-date" class="canvas-story-date"><span class="story-date-content"></span></div>';
	
	// Slide Content
	var canvas_slide = '<div id="canvas-visible-slide" class="canvas-slide" style="height:397.5px; width:530px;"></div>';
	var canvas_slide_inner = '<div id="canvas-visible-slide-inner" class="canvas-slide-inner"></div>';
	var canvas_slide_inner_content = '<div id="canvas-visible-slide-inner-content" class="canvas-slide-inner-content"></div>';
		
		// Slide images
		var canvas_slide_image = '<div id="canvas-visible-slide-inner-content-image-color" class="canvas-slide-image-color" style="position:absolute;"></div>';
		//Dialog
		var canvas_slide_dialog = '<div id="canvas-visible-slide-inner-content-dialog" class="canvas-dialog"></div>';
		var canvas_slide_dialog_inner = '<div id="canvas-visible-slide-inner-content-dialog-inner" class="canvas-dialog-inner hidden"></div>';
	// Control
	var canvas_slide_control = '<div id="canvas-visible-slide-control" class="canvas-slide-control"></div>';
	var canvas_slide_control_inner = '<div id="canvas-visible-slide-control-inner" class="canvas-slide-control-inner"></div>';
	var canvas_slide_control_content = '<div id="canvas-visible-slide-control-content" class="canvas-slide-control-content"></div>';
		var clear_div = '<div class="clear"></div>';
		var canvas_slide_control_left = '<div id="canvas-visible-slide-control-left" class="canvas-slide-control-left"></div>';
		var canvas_slide_control_right = '<div id="canvas-visible-slide-control-right" class="canvas-slide-control-right"></div>';
		// Control Elements
		var canvas_slide_control_1 = '<div id="canvas-visible-slide-control-content-1" class="canvas-slide-control-1"></div>';
			var canvas_slide_control_play = '<div id="canvas-visible-slide-control-play" class="canvas-slide-control"><span class="play-content">Play</span></div>';
			var canvas_slide_control_stop = '<div id="canvas-visible-slide-control-stop" class="canvas-slide-control"><span class="stop-content">Stop</span></div>';
		var canvas_slide_control_2 = '<div id="canvas-visible-slide-control-content-2" class="canvas-slide-control-2"></div>';
			var canvas_slide_control_2_inner = '<div id="canvas-visible-slide-control-content-2_inner" class="canvas-slide-control-2_inner"></div>';
				var canvas_slide_control_content_rewind = '<div id="canvas-visible-slide-control-content-rewind" class="canvas-slide-control-rewind"></div>';
				var canvas_slide_control_first = '<div id="canvas-visible-slide-control-first" class="canvas-slide-control-first"><span class="first-content">First</span></div>';
				var canvas_slide_control_previous = '<div id="canvas-visible-slide-control-previous" class="canvas-slide-control-previous"><span class="previous-content">Previous</span></div>';
			
			var canvas_slide_status = '<div id="canvas-visible-slide-count-stat" class="canvas-slide-count-stat"></div>';
			var canvas_slide_stat = '<div id="canvas-visible-slide-stat" class="canvas-slide-stat"><span class="current-slide"></span><span class="total-slides"></span></div>';
			
			var canvas_slide_control_content_forward = '<div id="canvas-visible-slide-control-content-forward" class="canvas-slide-control-forward"></div>';
				var canvas_slide_control_next = '<div id="canvas-visible-slide-control-next" class="canvas-slide-control"><span class="next-content">Next</span></div>';
				var canvas_slide_control_last = '<div id="canvas-visible-slide-control-last" class="canvas-slide-control-last"><span class="last-content">Last</span></div>';
			
	// Description 
	var canvas_description = '<div id="canvas-visible-description" class="canvas-description"></div>';
	var canvas_description_content = '<div id="canvas-visible-description-content" class="canvas-description-content"><label>Description:</label><span class="description-content"></span></div>';

	// Embeding Elements
	var embed_label = '<label>Embed Code :<label>';
	var embed_input = '<textarea rows="1" cols="72" value="" name="embed_text" readonly="1" />';
	// Append the canvas
//	if( !$('#canvas').length ) {
//		$('#content-area-inner').append( canvas );
//	}
	
	//$('#canvas').append( canvas_visible );
	//$('#content-area-inner').append( canvas_visible );
	$('#canvas-visible').append( canvas_visible_inner );
	$('#canvas-visible-inner').append( canvas_visible_inner_content );
	
	// Append the Story Title Div
	$('#canvas-visible-inner-content').append( canvas_story_title );
	$('#canvas-visible-story-title').append( canvas_story_title_content );
	
	// Append Creator and Date Div
	$('#canvas-visible-inner-content').append( canvas_story_creator );
	$('#canvas-visible-inner-content').append( canvas_story_date );
	
	// Append the Slide Content Div
	$('#canvas-visible-inner-content').append( canvas_slide );
	$('#canvas-visible-slide').append( canvas_slide_inner );
	$('#canvas-visible-slide-inner').append( canvas_slide_inner_content );
		$('#canvas-visible-slide-inner-content').append( canvas_slide_image );
		// Append Dialog Div
		$('#canvas-visible-slide-inner-content').append( canvas_slide_dialog );
		$('#canvas-visible-slide-inner-content-dialog').append( canvas_slide_dialog_inner );
	// Append Control Div
	$('#canvas-visible-inner-content').append( canvas_slide_control );
	$('#canvas-visible-slide-control').append( canvas_slide_control_inner );
	$('#canvas-visible-slide-control-inner').append( canvas_slide_control_content );
		// Append Control Elements Div
		$('#canvas-visible-slide-control-content').append( canvas_slide_control_1 );
			$('#canvas-visible-slide-control-content-1').append( canvas_slide_control_left );		
			$('#canvas-visible-slide-control-content-1').append( canvas_slide_control_play );
			$('#canvas-visible-slide-control-content-1').append( canvas_slide_control_stop );
			$('#canvas-visible-slide-control-content-1').append( canvas_slide_control_right );
			$('#canvas-visible-slide-control-content-1').append( clear_div );
		$('#canvas-visible-slide-control-content').append( canvas_slide_control_2 );
			$('#canvas-visible-slide-control-content-2').append( canvas_slide_control_left );
			$('#canvas-visible-slide-control-content-2').append( canvas_slide_control_2_inner );
				$('#canvas-visible-slide-control-content-2_inner').append( canvas_slide_control_content_rewind );				
				$('#canvas-visible-slide-control-content-rewind').append( canvas_slide_control_first );
				$('#canvas-visible-slide-control-content-rewind').append( canvas_slide_control_previous );
				
				$('#canvas-visible-slide-control-content-2_inner').append( canvas_slide_status );
				$('#canvas-visible-slide-count-stat').append( canvas_slide_stat );
				
				$('#canvas-visible-slide-control-content-2_inner').append( canvas_slide_control_content_forward );
				$('#canvas-visible-slide-control-content-forward').append( canvas_slide_control_next );
				$('#canvas-visible-slide-control-content-forward').append( canvas_slide_control_last );			
				$('#canvas-visible-slide-control-content-2_inner').append( clear_div );
			$('#canvas-visible-slide-control-content-2').append( canvas_slide_control_right );
			$('#canvas-visible-slide-control-content-2').append( clear_div );
		$('#canvas-visible-slide-control-content').append( clear_div );
			
	// Append the Description Div
	$('#canvas-visible-inner-content').append( canvas_description );
	$('#canvas-visible-description').append( canvas_description_content );
	
	$('#embed-story').append( embed_label );
	$('#embed-story').append( embed_input );
	var embed_code = '<object id="contentarea" width="600px" height="600px" type="text/html" data="%s/embed/index/%d"></object>';
	$('textarea[name=embed_text]').val( $.sprintf(embed_code, base_url, story_id) );
}

function load_initial_story_component() {
	
	//Load initial components
	$('#canvas-visible-story-title-content .story-title-content').text( story_data.story_name );
	$('#canvas-visible-story-creator .creator-content').text( 'By ' + story_data.user );
	$('#canvas-visible-story-date .story-date-content').text( 'on ' + story_data.created_on );
	
	if( story_data.preloadComplete ) {
		if( story_data.cover_image ) {
			var canvas_visible_height = $('#canvas-visible-slide').height();
			var canvas_visible_width = $('#canvas-visible-slide').width();
			//var story_cover_image = '<img class="story-cover-image" src="%s/public/images/storycover/%s/%s" style="height:%s; width:%s;" />';
			var story_cover_image = '<img class="story-cover-image" src="%s/imagecache/slideshow/storycover/%s/%s" style="height:%s; width:%s;" />';
			$('#canvas-visible-slide-inner-content-image-color').prepend( $.sprintf(story_cover_image, base_url, story_data.user, story_data.cover_image, canvas_visible_height, canvas_visible_width) );
		}
		else {
			
			var story_background_color = '<div id="story-background-color" style="background-color:rgb(0, 0, 0); height:397.5px; width:530px;" ></div>';
			$('#canvas-visible-slide-inner-content-image-color').prepend( story_background_color );
		}
	}
	$('#canvas-visible-slide-stat .current-slide').text("0");
	$('#canvas-visible-slide-stat .total-slides').text("/" + story_data.slides_count);
	// Load the description of the story
	$('#canvas-visible-description-content .description-content').text( " "+story_data.description );
	
//	// Load the embed code
//	var embed_code = '<object id="contentarea" width="600px" height="600px" type="text/html" data="%s/embed/index/%d"></object>';
//	$('textarea[name=embed_text]').val( $.sprintf(embed_code, base_url, story_id) );
}

function getMilliseconds( time ) {
  var time = time.split(":");  
  var date = new Date();
  /**
   * In order for IE to work with Date()
   * param time is split into hrs, mins, secs and the date's time is set to param's time
   */
  date.setHours( time[0] );
  date.setMinutes( time[1] );
  date.setSeconds( time[2] );
  
  seconds = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds();
  
  return 1000 * seconds; 
}

function map_slide() {
	var slides = story_data.slide;
	var slide_array = new Array(), i=0;
	$.each( slides, function(id, data) {
		slide_array[i++] = data;
	});

	return slide_array;
}

function control_event_handler() {
	// Global boolean variables
	first_clicked = false;
	last_clicked = false;
	next_clicked = false;
	previous_clicked = false;
	
	var slides = map_slide();
	slideShowObject = new slideshow(slides, 'slideShowObject');
	
	$('#canvas-visible-slide-control-play').bind('click', function() {
		slideShowObject.play();
	});
	
	$('#canvas-visible-slide-control-stop').bind('click', function() {
		
		slideShowObject.stop();
	});
	
	$('#canvas-visible-slide-control-next').bind('click', function() {
		
		next_clicked = true;
		slideShowObject.next();
	});
	
	$('#canvas-visible-slide-control-previous').bind('click', function() {
		
		previous_clicked = true;
		slideShowObject.previous();
	});
	
	$('#canvas-visible-slide-control-first').bind('click', function() {
		//alert('first');
		first_clicked = true;
		slideShowObject.first();
	});
	
	$('#canvas-visible-slide-control-last').bind('click', function() {
		//alert('last');
		last_clicked = true;
		slideShowObject.last();
	});
}

function slideshow(slides, objectName) {
	
	this.objectName = objectName;
	this.current = -1;
	this.slides = slides;
	this.interval = 1000;
	this.next_slide_time = 0;		
	this.intervalid = 0;
	this.slide_ended = false;
	
	// Global variables
	initial_play = true;
	timeoutid = new Array();
	stopped = true;			// Initial status of slide show is stopped before playing
	stop_clicked = false;	// Initial status of click event of stop button is false
	start = false;			// Initial status of slide show is false
	
	this.slide_interval = function() {
		var slide_time = 0;

		if(this.current < 0) {
			return slide_time = 100;
		}
		else {			
			if(this.slides[this.current].container_html && !this.slides[this.current].dialogs) {
				slide_time += 3000;
			}
			else if( (this.slides[this.current].dialogs && this.slides[this.current].container_html)
					|| this.slides[this.current].dialogs ) {
				$.each(this.slides[this.current].dialogs, function(dialogid, dialogdata) {
					var dialog_start_time = getMilliseconds( dialogdata.start_time );
					
					slide_time += Number(dialog_start_time);	
					
				});
			}
			else {
				// Stress handling
				slide_time += 3000;
			}
			
			return slide_time += 2000;
		}
	}

	// Method play
	this.play = function(timer) {
		
		//this.stop();
		// Clear the interval
		clearInterval(this.intervalid);
		this.intervalid = 0;

		start = true;
		
		this.next_slide_time = this.slide_interval();

		interval = (stop_clicked) ? 100 : ( (stopped) ? 100 : this.next_slide_time );
		
		this.intervalid = setInterval(this.objectName+".loop()", interval);
				
		//stopped = false;
		
	}
	
	// Method stop
	this.stop = function(timer) {
		if( start ) {
			start = false;
			stopped = true;
			stop_clicked = true;
			intial_play = false;
			this.clear_time_interval();
		}
		
//		// Stop the individual slide's timer
//		if(this.intervalid != 0) {			
//			clearInterval(this.intervalid);
//			this.intervalid = 0;
//			
//		}
//		
//		// Stop the dialogs timer
//		$.each(timeoutid, function(key, id) {
//			clearTimeout(id);
//		});

	}
	
	// Method update to place the slide datas in their respective html tags
	this.update = function() {
		$('#canvas-visible-slide-stat .current-slide').text(this.current + 1);
		this.slide_show(slides[this.current]);
		
	}
	
	// Method next
	this.next = function() {
		if(this.current < this.slides.length - 1) {
			if( (stopped || stop_clicked) && start ) {
				stopped = false;
				stop_clicked = false;
				if( this.current == -1 )
					this.current += 1;
				
				this.update();
			}
			// Next Click while playing
			// Stop the time and loop over again so that the control passes to the else statement below
			else if( start && next_clicked ) {
				
				this.clear_time_interval();

				//interval = this.slide_interval();
				
				this.intervalid = setInterval(this.objectName+".loop()", 100);
				next_clicked = false;
								
			}
			else {
				//alert('increment');
				this.current++;
				//$('#canvas-visible-slide-stat .current-slide').text(this.current + 1);
				
				this.update();
				
				// After updating set next_clicked to false
				next_clicked = false;
			}
			
		}
		else {
			this.last = true;
			
			//alert('This is the end of slide');
		}
		
	}
	
	// Method previous
	this.previous = function() {
		if(this.current > 0 ) {
			// Continue from the same point
			if( stop_clicked && start ) {
				stop_clicked = false;
				//alert(' I AM NEVER ENTERING HERE');
				this.update();
			}
			// Previous Click while playing
			// Stop the time and loop over again so that the control passes to the else statement below
			else if( start && previous_clicked ) {
				this.clear_time_interval();
				
				//interval = this.slide_interval();
				this.current -= 2;
				this.intervalid = setInterval(this.objectName+".loop()", 100);
				previous_clicked = false;
				
			}
			else {
				this.current--;
				//$('#canvas-visible-slide-stat .current-slide').text(this.current + 1);
				
				this.update();
				previous_clicked = false;
			}
		}else {
			//alert('You are at the beginning of slide');
		}
		
	}
	
	// Method loop to continue slideshow
	this.loop = function() {
		// Stop the slideshow if the show reaches the end
		if(this.current + 1 == this.slides.length) {
			this.stop();
			this.current = -1;
			stop_clicked = false;
			
			//alert('You have reached the end of slide show');
			
			// Clear the container and load the intial story components
			storyboard_clear_container();
			load_initial_story_component();
				
		}else {
			//alert('i am inside loop');
			// Continue slideshow
			this.next();
			this.play();
		}
		
	}

	this.first = function() {
		// First Click while playing
		// Stop the time and loop over again so that the control passes to the else statement below
		if( start && first_clicked ) {
			this.clear_time_interval();
			
			//interval = this.slide_interval();
			this.current = -1;
			this.intervalid = setInterval(this.objectName+".loop()", 100);
			first_clicked = false;
			
		}
		else {
			this.current = 0;
			$('#canvas-visible-slide-stat .current-slide').text(this.current + 1);
			
			this.update();
			first_clicked = false;
		}
		
//		// Clear Interval
//		this.clear_time_interval();
//		
//		this.current = 0;
//		$('#canvas-visible-slide-stat .current-slide').text(this.current + 1);
//		
//		this.update();
		

	}
	
	this.last = function() {
		
		// Last Click while playing
		// Stop the time and loop over again so that the control passes to the else statement below
		if( start && last_clicked ) {
			this.clear_time_interval();
			
			//interval = this.slide_interval();
			this.current = this.slides.length - 2;
			this.intervalid = setInterval(this.objectName+".loop()", 100);
			last_clicked = false;
			
		}
		else {
			this.current = this.slides.length - 1;
			$('#canvas-visible-slide-stat .current-slide').text(this.current + 1);
			
			this.update();
			last_clicked = false;
		}
		
	}
	
	this.clear_time_interval = function() {
		// Clear the next slide's time 
		clearInterval(this.intervalid);
		
		// Clear the dialogs time
		$.each(timeoutid, function(key, timerid){
			clearTimeout(timerid);
		});
	}
	
	this.slide_show = function(slidedata) {
		storyboard_clear_container();

		// Load the background image or color
		if( slidedata.background ) {
			
			var canvas_visible_height = $('#canvas-visible-slide').height();
			var canvas_visible_width = $('#canvas-visible-slide').width();
			var background_filename = slidedata.background.bg_image_file_name;
			var background_src = '<img class="background-image" src="%s/imagecache/slideshow/backgrounds/%s/%s" />';
			
			$('#canvas-visible-slide-inner-content-image-color').prepend( $.sprintf(background_src, base_url, story_data.user, background_filename) );
		}
		if( slidedata.background_color ) {
			
			var background_color = slidedata.background_color;
			var background_src = '<div id="story-background-color" style="background-color:%s; height:397.5px; width:530px;" ></div>';
			
			$('#canvas-visible-slide-inner-content-image-color').prepend( $.sprintf(background_src, background_color) );
		}
		
		if( slidedata.container_html ) {
			//console.log(slidedata.container_html);
			var containerhtml = '<div id="container_html" class="container_html">%s</div>';
			$('#canvas-visible-slide-inner-content-dialog-inner').append( $.sprintf(containerhtml, slidedata.container_html) );
			$('#canvas-visible-slide-inner-content-dialog-inner').show();
			//$('#canvas-visible-slide-inner-content').append( $.sprintf(containerhtml, slidedata.container_html) );
		}
		// Load the actors
//		if( slidedata.actors ) {
//			$.each( slidedata.actors, function(actorid, actordata) {
//				var actor_filename = actordata.actor_image_file_name;
//				//var actor_src = '<img class="actor-image" id="actor-%s" src="%s/public/images/actors/%s/%s" style="position:absolute; height:50px; width:50px;"/>';
//				var actor_src = '<img class="actor-image" id="actor-%s" src="%s/imagecache/thumbnail3/actors/%s/%s" style="position:absolute;"/>';
//			    
//			    $('#canvas-visible-slide-inner-content-image-color').append( $.sprintf(actor_src, actordata.id, base_url, story_data.user, actor_filename) );
//			    
//			});
//		}
		// Load dialogs and adjust the actor position
		if( slidedata.dialogs ) {
			var i=0;
			$.each( slidedata.dialogs, function(dialogid, dialogdata) {
				//console.log(slidedata.dialogs);
				var actor_id = dialogdata.actor_id;
				var actor_filename = slidedata.actors[actor_id].actor_image_file_name;
				var actor_src = '<img class="actor-image" id="actor-%s" src="%s/imagecache/thumbnail3/actors/%s/%s" style="position:absolute; left:%s; top:%s; height:%s; width:%s;"/>';
				$('#canvas-visible-slide-inner-content-image-color').append( $.sprintf(actor_src, actor_id, base_url, story_data.user, actor_filename, dialogdata.x, dialogdata.y, dialogdata.actor_height, dialogdata.actor_width) );
				
				// Adjust the position of the actors
				$('#canvas-visible-slide-inner-content-image-color img#actor-'+dialogdata.actor_id).css( {left: dialogdata.x, top: dialogdata.y} );
				
				if( start ) {
					var start_time = getMilliseconds( dialogdata.start_time );
					/**
					 * IE does not support passing of parameter in setTimeout()
					 * So, for IE to support passing of parameter CLOSURE is used as below
					 */
					//timeoutid[i++] = setTimeout(load_dialogs, start_time, dialogdata);
					var fnLoadDialog = function() {
						load_dialogs(dialogdata);
					}
					timeoutid[i++] = setTimeout(fnLoadDialog, start_time);
									
				}
			});
		}
		
		// Load the description
		$('#canvas-visible-description-content .description-content').text( " "+slidedata.description );
	
	}
}


function load_dialogs(dialogdata) {
	  
	var dialog_div = '<div id="dialog-%s-%s" class="dialog hidden">'+
						'<div id="dialog-inner-%s-%s" class="dialog-inner" style="width: 150px;" >'+
							'<span class="bubble-dialog">%s</span>'+
							'<span class="arrow"></span>'+
						'</div>'+
					'</div>';
	var dialog = ( dialogdata.dialog ) ? dialogdata.dialog : '';
	
	var dialog_container = '#canvas-visible-slide-inner-content-dialog-inner';
	if( dialog ) {
		
		// Append the dialog div
		$(dialog_container).append( $.sprintf(dialog_div, dialogdata.id, dialogdata.actor_id, dialogdata.id, dialogdata.actor_id, dialog) );
		//var dialog_height = $('div#dialog-inner-'+dialogdata.id+'-'+dialogdata.actor_id).height();
		// Dialog Bubble Color			
		$('#dialog-inner-'+dialogdata.id+'-'+dialogdata.actor_id).css('background-color', dialogdata.textarea_color);
		$('#dialog-inner-'+dialogdata.id+'-'+dialogdata.actor_id+' .arrow').css('border-top-color', dialogdata.textarea_color);
		$('#dialog-inner-'+dialogdata.id+'-'+dialogdata.actor_id+' span.bubble-dialog').css('color', dialogdata.font_color);
		
		// Show Dialogs ( To get the height and width of dialog )
		$('#canvas-visible-slide-inner-content-dialog-inner').removeClass('hidden');
		$('#dialog-'+dialogdata.id+'-'+dialogdata.actor_id).removeClass('hidden');
		
		// Adjust the dialog position w.r.t. actors coordinates
		adjust_dialog_position( dialogdata );
		
	}
}

function adjust_dialog_position(dialogdata) {
	
	var actor_top = $('div#canvas-visible-slide-inner-content-image-color img#actor-'+dialogdata.actor_id).css('top');
	var actor_left = $('div#canvas-visible-slide-inner-content-image-color img#actor-'+dialogdata.actor_id).css('left');
	var actor_height = $('div#canvas-visible-slide-inner-content-image-color img#actor-'+dialogdata.actor_id).height();
	var dialog_height = $('#dialog-inner-'+dialogdata.id+'-'+dialogdata.actor_id).height();		
	var dialog_width = $('#dialog-inner-'+dialogdata.id+'-'+dialogdata.actor_id).width();
	
	actor_top = (actor_top.match("pt")) ? Number( actor_top.replace('pt', '') ) : Number( actor_top.replace('px', '') );
	actor_left = (actor_left.match("pt")) ? Number( actor_left.replace('pt', '') ) : Number( actor_left.replace('px', '') );
	
	var dialog_top = actor_top - dialog_height - 16;
	var dialog_left = actor_left - 15;
	var arrowLeft = 0;
	// Pop up the dialog bubble below the actor
	if( dialog_top <= 0 ) {
		dialog_top = actor_top + actor_height + 12;
		var arrow_height = dialog_height + 5;
		var arrow_color = $('#dialog-inner-'+dialogdata.id+'-'+dialogdata.actor_id).css('background-color')
		$('#dialog-inner-'+dialogdata.id+'-'+dialogdata.actor_id+' .arrow').css('border-top', '0px');
		$('#dialog-inner-'+dialogdata.id+'-'+dialogdata.actor_id+' .arrow').css('border-bottom', '13px solid '+arrow_color);
		$('#dialog-inner-'+dialogdata.id+'-'+dialogdata.actor_id+' .arrow').css('bottom', arrow_height+'px');
		//$('#dialog-inner-'+dialogdata.id+'-'+dialogdata.actor_id+' .arrow').css('bottom', '22px');
		
	}
	
	if( dialog_left <= 0 ) {
		var left = '0px';
		dialog_left = left;
		
		arrowLeft = actor_left + 15;
	}		
	else if( (dialog_left + dialog_width ) >= ($('#canvas-visible-slide-inner-content').width()) ) {
		dialog_left = $('#canvas-visible-slide-inner-content').width() - dialog_width - 5 ;
		
		arrowLeft = actor_left - dialog_left + 15;
	}
	else {
		arrowLeft = actor_left - dialog_left + 15;
	}

	/**
	 * Adjust the offset of dialogs wrt actors
	 */
	//$('#dialog-inner-'+dialogdata.id+'-'+dialogdata.actor_id).css( {top: actor_top-dialog_height-16, left: actor_left-15} );
	$('#dialog-inner-'+dialogdata.id+'-'+dialogdata.actor_id).css( 'top', dialog_top );
	$('#dialog-inner-'+dialogdata.id+'-'+dialogdata.actor_id).css( 'left', dialog_left );
	$('#dialog-inner-'+dialogdata.id+'-'+dialogdata.actor_id+' .arrow').css('left', arrowLeft);
			
}