/* Set Document Base Path */

var base_path = '/';
var base_path_admin = base_path + 'admin/';

document.base_path = base_path;
document.base_path_admin = base_path_admin;


/* jQuery Functions */

$(document).ready(
	function()
	{
		
		// lightbox effect throw facebox plugin
		
		// any link with a class of lightbox
		$('a.lightbox').facebox();
		
		//$('').click(function() {  });
		$('#facebox div.image img').live('hover', function() {
			$(this).css('cursor','pointer');
		});
		
		$('#facebox div.image img').live('click', function() {
			
			$(document).trigger('close.facebox');
			
		});
		
		
		
		// Slider
		//scrollpane parts
		var scrollPane = $('.scroll-pane');
		var scrollContent = $('.scroll-content');
		
		//build slider
		var scrollbar = $(".scroll-bar").slider(
			{
				slide:function(e, ui)
				{
					if( scrollContent.width() > scrollPane.width() )
					{
						scrollContent.css( 'margin-left', Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() ) ) + 'px' );
					}
					else
					{
						scrollContent.css( 'margin-left', 0 );
						}
				}
			}
		);
		scrollbar.width( '96%' );
		//append icon to handle
		var handleHelper = scrollbar.find('.ui-slider-handle')
			.mousedown(function(){
				scrollbar.width( '96%' );
			})
			.mouseup(function(){
				scrollbar.width( '96%' );
			})
			//.append('<span class="ui-icon ui-icon-grip-dotted-vertical"></span>')
			.wrap('<div class="ui-handle-helper-parent"></div>').parent();
		
		//change overflow to hidden now that slider handles the scrolling
		scrollPane.css('overflow','hidden');
		
		//size scrollbar and handle proportionally to scroll distance
		function sizeScrollbar(){
			/*
			var remainder = scrollContent.width() - scrollPane.width();
			var proportion = remainder / scrollContent.width();
			var handleSize = scrollPane.width() - (proportion * scrollPane.width());
			scrollbar.find('.ui-slider-handle').css({
				width: handleSize,
				'margin-left': -handleSize/2
			});
			handleHelper.width('').width( scrollbar.width() - handleSize);
			*/
		}
		
		//reset slider value based on scroll content position
		function resetValue(){
			var remainder = scrollPane.width() - scrollContent.width();
			var leftVal = scrollContent.css('margin-left') == 'auto' ? 0 : parseInt(scrollContent.css('margin-left'));
			var percentage = Math.round(leftVal / remainder * 100);
			scrollbar.slider("value", percentage);
		}
		//if the slider is 100% and window gets larger, reveal content
		function reflowContent(){
				var showing = scrollContent.width() + parseInt( scrollContent.css('margin-left') );
				var gap = scrollPane.width() - showing;
				if(gap > 0){
					scrollContent.css('margin-left', parseInt( scrollContent.css('margin-left') ) + gap);
				}
		}
		
		//change handle position on window resize
		$(window)
		.resize(function(){
				resetValue();
				sizeScrollbar();
				reflowContent();
		});
		
		//init scrollbar size
		setTimeout(sizeScrollbar,10);//safari wants a timeout
		
		// set the width of the actual scrollable content
		// finds all images and calculates width
		// partially written by @nsearle
		if( $('.scroll-content').length )
		{
			if( ! document.scrollWidth || document.scrollWidth == 0 ){
				strip_viewer_width = 0;
			}else{
				strip_viewer_width = document.scrollWidth;
			}

			
			/*$('.scroll-content').find('img').each( 
				function( i, element )
				{
					strip_viewer_width += ( element.width + 30 );
				}
			);*/
			
			$('.scroll-content').css( 'width', strip_viewer_width + 'px' );
			
			// if there is no reason to scroll, hide the scroll bar
			if( 940 > strip_viewer_width )
			{
				$('.scroll-bar-wrap').hide();
			}
			// if so then create scrolling arrows
			else
			{
				var left_arrow = '<div id="left-arrow"><a href="#/scroll-left" rel="left" title="Scroll Left">Scroll Left</a></div>';
				var right_arrow = '<div id="right-arrow"><a href="#/scroll-right" rel="Scroll Right">Scroll Right</a></div>';
				
				$('.demo').after( '<div class="clear"></div><div id="arrow-holder">' );
				$('#arrow-holder').append( left_arrow ).append( right_arrow );
				
				$('#left-arrow a').hover(
					function()
					{
						timerId = setInterval(
							function()
							{
								if( 0 <= parseInt( scrollContent.css('margin-left') ) )
								{
									clearInterval(timerId);
								}
								else
								{
									var new_margin = scrollContent.css('margin-left');

									new_margin = parseInt( new_margin ) + 2;

									scrollContent.css('margin-left', new_margin + 'px' );

									resetValue();
								}
							},
							8							
						);
					},
					function()
					{
						clearInterval(timerId);
					}
				);
				
				$('#right-arrow a').hover(
					function()
					{
						timerId = setInterval(
							function()
							{
								var max = strip_viewer_width - 942;

								var current_position = parseInt( scrollContent.css('margin-left') ) * (-1);

								if( current_position < max )
								{
									var new_margin = scrollContent.css('margin-left');

									new_margin = parseInt( new_margin ) - 2;

									scrollContent.css('margin-left', new_margin + 'px' );

									resetValue();
								}
								else
								{
									clearInterval(timerId);
								}
							},
							8							
						);
					},
					function()
					{
						clearInterval(timerId);
					}
				);
			}
			
			//Now we should set the default location depending on which item they have selected
			
			var max_width = strip_viewer_width - 942;
			
			var default_position = document.scrollDefault;

			if( default_position < max_width )
			{
				
				default_position = default_position * -1;
				
				scrollContent.css('margin-left', default_position + 'px' );

				resetValue();
			}
			else
			{
				
				max_width = max_width * -1;

				if( max_width < 942 && max_width > -942 ) {
					max_width = Math.round( max_width / 2 );
				}

				scrollContent.css('margin-left', max_width + 'px' );

				resetValue();
			}
			
		}
		
		
	}
);