function init_scrollbar ()
{
	var total_width = 0;

	$('.block-item').each(function(index) {
		total_width += parseInt($(this).width(), 10);
	});
	//alert(totalWidth);
	
	$('#content-slide').width(total_width);
	
	//scrollpane parts
	scroll_viewer = $('#viewer-slide'); // scroll-frame
	scroll_content = $('#content-slide'); // scroll-content
	scroll_location_pixel = 0;
	original_location_scroll_handle = 0;
	original_width_scroll_content = scroll_content.width();
	//scroll_content.width(total_width);
	
	scrollbar = $('#slider').slider({
		min: 0,
		animate: true,
		create: on_scrollcreate,
		change: on_scrollchange,
		slide: on_scrollslide
	});
}

function on_scrollchange(event, ui)
{
	//var scroll_maximum = scroll_viewer.attr("scrollWidth") - scroll_viewer.width();
	var scroll_maximum = scroll_content.width() - scroll_viewer.width();
	scroll_viewer.animate({scrollLeft: ui.value * (scroll_maximum / 100) }, 1000);
	original_location_scroll_handle = ui.value;
	scroll_location_pixel = ui.value * (scroll_maximum/ 100);
	//alert(ui.value);
}

function on_scrollslide(event, ui)
{
	//var scroll_maximum = scroll_viewer.attr("scrollWidth") - scroll_viewer.width();
	var scroll_maximum = scroll_content.width() - scroll_viewer.width();
	scroll_viewer.attr({scrollLeft: ui.value * (scroll_maximum / 100) });
	
	//scroll_viewer.attr({scrollLeft: ui.value * (scroll_maximum / 100) });
	//As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. 
	//In addition, .attr() should not be used on plain objects, arrays, the window, or the document. 
	//To retrieve and change DOM properties, use the .prop() method.
    scroll_viewer.prop({scrollLeft: ui.value * (scroll_maximum / 100) });
}

function on_scrollcreate(event, ui) 
{
	//location_article();
	
	//get_mosaic();
}

function location_article(total_width)
{
	$('.tile-item,#menu-header li').click(function(){
	
		var path = $(this).find('a').attr('href');
		
		// Make sure always remove the object sibling's current-menu class name.
		$(this).siblings().removeClass('current-menu');
		
		// Then add the class name to the object.
		$(this).addClass('current-menu');
		
		// Redirect the page.
		if(path) document.location.href = path;
		
		return false;
	});

}

function do_hashchange(total_width)
{
	//$('.tile-tag > ul > li > ul > li > a,#article-tags > ul > li > a').click(function(){
	//$('a.get-mosaic,#article-tags > ul > li > a').click(function(){
	$(window).hashchange(function() {

		var hash = location.hash;
		//alert(hash);
		
		// Check if the fragment/ hash doesn't exit, then slide up and remove the container.
		if(hash == "" || hash == "#/") 
			if($('#container-article').length > 0) 
				$('#container-article').remove();
				scroll_content.css({width: original_width_scroll_content + 'px'});
		
		// Attach the load article function.
		do_fragment(total_width);
					
		return false;
	});

}

function do_fragment(total_width)
{
	var fragment = location.hash;
	//alert(fragment);
	
	// Check if fragment exists.
	if(fragment)
	{
		// Check if '/' exists in the fragment eg. #/article-1
		// Then, split the string with '/' to get the last item in the array eg. article-1
		if (fragment.indexOf("/") > 0)
		{
			//var url_next = window.location;
			// Get the last second item in the array.
			var array_fragment = fragment.split('/');
			var directory = array_fragment[array_fragment.length - 3];
			var request = array_fragment[array_fragment.length - 2];
			//var page_url = $(array_fragment).last()[0];
		}
		// If '/' does not exisit, then check if '#' exists in the fragment eg. #article-1
		// Then, split the string with '#' to get the last item in the array eg. article-1
		else if (/#/i.test(fragment))
		{
			//var url_next = window.location;
			// Get the last second item in the array.
			var array_fragment = fragment.split('#');
			var directory = array_fragment[array_fragment.length - 3];
			var request = array_fragment[array_fragment.length - 2];
			//var page_url = $(array_fragment).last()[0];
		}
		
		//alert(directory);
		//var array_url = path.split('/');
		// Check if the keyword exists in the array.
		//if ($.inArray(keyword, array_url)) alert('match!');
		if ($.inArray('tag', array_fragment) == 1) get_mosaic(directory,request);
		if ($.inArray('tags', array_fragment) == 1) get_mosaic(directory,request);
		if ($.inArray('story', array_fragment) == 1) get_article(directory,request,total_width,fragment);
		if ($.inArray('page', array_fragment) == 1) get_article(directory,request,total_width,fragment);

	}
		
}

function get_mosaic(directory,request)
{
	// Make sure always remove current-menu class name of the menu li.
	if($('li').hasClass('current-menu')) $('li').removeClass('current-menu');

	// Set the binder opacity to 0.
	scroll_content.animate({
		opacity:0
	},500, function(){
	
		// Load the article into container_article.
		$(this).load( http_root + rp_local_template + 'mosaic-' + directory + '.php?tag_name=' + request, function(){
		
			var total_width = 0;

			$('.block-item').each(function(index) {
				total_width += parseInt($(this).width(), 10);
			});
			//alert(totalWidth);
			
			scroll_content.width(total_width);
			
			// Send the percentage to scrollbar.
			scrollbar.slider("value",0);
			
			
			$(this).animate({
				opacity:1
			},2000);
			
			// Attach the grayscale plugin.
			$(".tile-shield").grayscale_tile_image();
			
			// Attach the image tile reveal plugin.
			$(".tile-shield").reveal_tile_image();
			
			// Attach the text tile reveal plugin.
			$(".tile-gray").reveal_tile_text();
			
			// Unbind the click event from menu-header li.
			$('.tile-item,#menu-header li').unbind('click');
			
			// Attach the get_article function back.
			location_article(total_width);
			
		});
	
	});
}


function get_article(directory,request,total_width,fragment)
{
	
	// http://api.jquery.com/attribute-ends-with-selector/
	var parent = $('.tile-item a[href$="' + fragment + '"]').parents('.block-item');
	
	// Check if the keyword exists in the array.
	//if ($.inArray(keyword, array_url)) alert('match!');
	if (directory == 'story') template = 'article-sub-items.php';
	else template = 'article-main-items.php';
	
	// Always set the scroll content to its original width.
	if(total_width) scroll_content.css({width: total_width + 'px'});
	else scroll_content.css({width: original_width_scroll_content + 'px'});
	
	if($('#container-article').length > 0)
	{
			
		//alert($('#container-article').length);
		//alert($('#container-article').width());
		
		// Remove any previous ajax loaded page.
		$('#container-article').remove();
		
	};
	
	// Create a div after the parent clicked element.
	// Else prepend the div before the elements.
	if(parent.length > 0) 
	{
		// Make sure always remove current-menu class name of the menu li.
		if($('li').hasClass('current-menu')) $('li').removeClass('current-menu');
		
		// Create a div after object's parent.
		parent.after('<div id="container-article"></div>');
	}
	else 
	{
		
		// Prepend the div.
		scroll_content.prepend('<div id="container-article"></div>');
		//if($('.blocks').length > 0) $('.blocks').prepend('<div id="container-article"></div>');
		//else $('#content-slide').prepend('<div id="container-article"></div>'); // fix for IEs, including IE9.
	}
	
	// Set the div to a variable and set its css.
	var container_article = $('#container-article').css({
		float:'left',
		width:0
	});
	
	// Load the article into container_article.
	container_article.load( http_root + rp_local_template + template + '?page_url=' + request, function(){
		
		// Get the width of the loaded article first.
		
		// This won't work on IE
		//var width_binder_article = container_article.width();
		
		// Do this way instead.
		// Set default variable and the targets.
		var width_binder_article = 0;
		var width_page_item = 500;
		var object_binder_article = $('#binder-article');
		var object_article_item = $('.article-item');
		
		object_article_item.each(function(){
			
			// Set the varible of the object in each article item.
			var object_article_page = $('.article-page',this);
			var object_exit_article = $('.exit-article-bits',this);
			var object_stories_like_this = $('.stories-like-this',this);
			
			// Calculate the width.
			// Sum the width of each article item for the article binder.
			// Set the width of the object in each article item.
			//total_width_binder_articles += parseInt($(this).width(), 10);
			//alert($('.article-left',this).width());
			width_binder_article += $('.article-left',this).width() + (width_page_item * object_article_page.length) + 50; // 50 is the margin spacing in the layout.
			object_exit_article.width(object_exit_article.width() * object_article_page.length);
			object_stories_like_this.width(object_stories_like_this.width() * object_article_page.length);
		
		});
		
		// Set the binder width and opacity to 0 to hide it first.
		// Set the width for other objects.
		object_binder_article.width(width_binder_article).css({opacity:0});
		
		// Add the article width into the existing content container width.
		scroll_content.width(scroll_content.width() + width_binder_article);
		
		// Get the position of current requested article.
		//var position_article = $(this).position();
		var position_article = $('.requested-article',this).position();
		
		object_binder_article.animate({
			opacity:1
		},1000);
		
		// Animate container_article.
		$(this).animate({
			width:width_binder_article
		},500,function(){
		
			// Get the percentage of the handle.
			var percentage = ((position_article.left) / (scroll_content.width()) * 100) * 1.34;
			//alert(percentage);
			
			// Send the percentage to scrollbar.
			scrollbar.slider("value",percentage);
			
			// Attach other functions.
			exit_article(container_article,total_width);
			//get_mosaic();
			
			
			// Issues with using AddThis on an all AJAX site and was able to come up with a couple of solutions for this issue.
			// It turns out there is a variable that you can pass when loading the AJAX script as well as a way to re-initialize the script if the DOM is reloaded via AJAX.
			// To briefly summarize, the solution is loading AddThis with the variable domready=1 appended, and re-initializing the script 
			// by deleting the initial load and then reloading the script dynamically:
			getScript_Addthis();
			//var t=setTimeout("getScript_Addthis()",5000);
			//getScript_sharethis();
		});

	});
		
}

function exit_article (container_article,total_width)
{
	$('.exit-article').click(function(){
		//var position = container_article.position();
		
		//alert(total_width);
		
		// Make sure always remove current-menu class name of the menu li.
		if($('li').hasClass('current-menu')) $('li').removeClass('current-menu');
		
		//alert(original_location_scroll_handle);
		scrollbar.slider("value", original_location_scroll_handle/2);
		
		// Set the binder opacity to 0.
		$('#binder-article').animate({
			opacity:0
		},1000);
		
		// Animate the container to 0 width.
		container_article.animate({
			width: 0
		}, 500, function(){
		
			// Relocate the slider's poisition.
			if(total_width) scroll_content.css({width: total_width + 'px'});
			else scroll_content.css({width: original_width_scroll_content + 'px'});
			
			// Remove the container.
			container_article.remove();
			
			// Remove the fragment.
			location.hash = '/';
			
		});
			
		return false;
	});
}

/* load the AddThis script through ajax */
function getScript_Addthis(){
	
	/*
	issues with using AddThis on an all AJAX site and was able to come up with a couple of solutions for this issue.

	It turns out there is a variable that you can pass when loading the AJAX script as well as a way to re-initialize the script 
	if the DOM is reloaded via AJAX.
	
	To briefly summarize, the solution is loading AddThis with the variable domready=1 appended, and re-initializing the script 
	by deleting the initial load and then reloading the script dynamically:
	*/
	
	var script_addthis = 'http://s7.addthis.com/js/250/addthis_widget.js#domready=1';
			
	if (window.addthis){
		window.addthis = null;
	}
	
	$.getScript(script_addthis, function() {
	  //alert('Load was performed.');
	});

}


/* load the AddThis script through ajax */
function getScript_sharethis(){
	
	/*
	issues with using AddThis on an all AJAX site and was able to come up with a couple of solutions for this issue.

	It turns out there is a variable that you can pass when loading the AJAX script as well as a way to re-initialize the script 
	if the DOM is reloaded via AJAX.
	
	To briefly summarize, the solution is loading AddThis with the variable domready=1 appended, and re-initializing the script 
	by deleting the initial load and then reloading the script dynamically:
	*/
		
	var script_sharethis = 'http://w.sharethis.com/button/buttons.js#domready=1';
			
	
	
	$.getScript(script_sharethis, function() {
	  //alert('Load was performed.');
	});

}