var slider = null;

$(function(){
		
	
	$('div.sliderGallery').each(function(){
		var scope = this;
		var ul = $('ul', scope);
		slideCount = $('li', ul).length;
		var liWidth = parseInt($('li', ul).css('width'));
		ulWidth = (slideCount*liWidth) + (slideCount*15) + 10;
		ul.css('width', ulWidth);
				
		var maskWidth = parseInt($('.handlemask',scope).css('width'));
		var handleWidth = parseInt($('.handle',scope).css('width'));
		slideMax = maskWidth-handleWidth;
		productWidth = ul.innerWidth() - $(scope).outerWidth();
		
		if(ul.innerWidth() > parseInt($('.mask',scope).css('width'))){
		
			// set percentage
			var navDelta = 50;

			slider = $('.handlemask', scope).slider({
				handle: '.handle',
				animate: false,
				min: 0,
				max: slideMax,
				slide: function(ev, ui){
					var p = ui.value / slideMax;
					ul.css('left', '-' + (p * productWidth) + 'px');
					$('.handle', this).css('left', ui.value + 'px');
				},
				change: function(ev, ui){
					var p = ui.value / slideMax;
					ul.css('left', '-' + (p * productWidth) + 'px');
					$('.handle', this).css('left', ui.value + 'px');
				}
			});
		
			$('a.next',scope).attr('rel',-navDelta);
			$('a.prev',scope).attr('rel',navDelta);
		
			var slideInterval = null;
				
			$('a.icon',scope).bind('click',function(e){
				$('.handlemask', scope).slider('value',parseInt($('.handlemask', scope).slider('value')) - parseInt($(this).attr('rel')));
				return false;
			});
			$('a.icon',scope).bind('mousedown',function(e){			
				clearInterval(scope.slideInterval);
				scope.slideInterval = setInterval(function(v){ $('.handlemask', scope).slider('value',parseInt($('.handlemask', scope).slider('value')) - v); }, 50 ,parseInt($(this).attr('rel')));
				return false;
			});
			$('a.icon',scope).bind('mouseup',function(e){
				clearInterval(scope.slideInterval);
				return false;
			});
		
		
			
		}else{
			
			//deactivate stuff
			$('div.handle',scope).hide();

			$('a.icon',scope).each(function(){
				$(this).hide();
			});
			
		}
		
		//wire up slide button
		$('img.thumb').each(function(){
			$(this).bind('click',function(){
				var id = $(this).parent().parent().attr('rel');
				$('#mediaplayer_flash').get(0).viewSlide(id);
			});
		});
		
						
	});

});

// External Interface
function getSelectedIndex()
{
	hash = 0;
	if(window.location.hash){
		hash = parseInt(window.location.hash.substring(1),10);
	}
	$('#mediaplayer_flash').get(0).viewSlide(hash);
}

function viewSlide(id,description)
{
	//loop through all existing active ones
	$('#filmstrip .sliderGallery li.active').each(function(){
		$(this).removeClass('active');
	});
	
	//add to the one
	$("#filmstrip .sliderGallery li[rel='"+id+"']").addClass('active');
	
	$('#photo_description').html(description);
	
	if(slider){
	
		//focus the filmstrip, maybe
		//xpos of value
		var modW = 162;
		var tX = id*(modW);
		var contW = 940;
		var v = 0;
	
		switch(true)
		{
			//left
			case tX < (contW-modW):
				v = 0;
			break;
		
			//right
			case tX > (contW-modW) && (ulWidth-tX) < (contW-modW):
				v = slideMax;
			break;
		
			//inbetweener Todo: set centering
			default:
				v = (id/slideCount) * slideMax;
			break;
		
		}
	
		//set value
		//$('#filmstrip .sliderGallery .handlemask').slider('value',v);
		//animate value
		var from = {value:parseInt($('#filmstrip .sliderGallery .handlemask').slider('value'))};
		var to = {value:v};
		jQuery(from).animate(to, {
			duration: 150,
			step: function() {
				$('#filmstrip .sliderGallery .handlemask').slider('value',this.value);
			}
		});
	
	}
}