// JavaScript Document
/* SCROLLER */
	
$(document).ready(function(){
	$(".scrollable").each(function(){
		var target = $(this);
		var tot = target.find("li").size();
		var items_w = 0;
		target.find("li:eq(0)").css({'padding-left': '12px'});
		target.find("li").each(function(){
			items_w = items_w + $(this).outerWidth();
		})
		var on_screen = Math.floor(target.outerWidth()/(target.find("li").outerWidth()));
		target.css({
				overflow: 'hidden'
		});
		target.find(".slider").css({
			width: items_w+'px',
			position: 'absolute',
			top: 0,
			left: '-12px'
		});	
		if(target.hasClass('landscape'))
			items_w = items_w - target.width();
		if(items_w > target.width()){
			if(!target.hasClass('landscape')){
				$('#container').append('<div id="dotnav"></div>');
				target.find("li").each(function(){
					items_w = items_w + $(this).outerWidth();
					var ix = target.find("ul li").index($(this));
					$("#dotnav").prepend('<li><span>'+(ix+1)+'</span></li>');
				})
			}else{
				$('#container').append('<div id="dotnav"></div>');
				target.find("li a").each(function(){
					var ix = target.find("ul a").index($(this));
					$("#dotnav").prepend('<li><span>'+(ix+1)+'</span></li>');
				})
			}
			target.append('<div class="clearfix"></div>	<div class="scrollbar"><div class="scrollarea"><div class="knob"></div></div></div>');
			var scrollbar = target.find('.scrollbar .scrollarea');
			var handle = target.find('.knob');
			scrollbar.show();
			//target.find("li").css({ opacity: .5});
			target.find('.scr_lt, .scr_rt').css({ cursor: 'pointer'})
			
			var scrollbar_w = target.width(); //target.find('ul').width() - target.width();
			var scroll_unit = (scrollbar_w)/tot;
			var pos = 0;
			var intervalGo = 0;
			var last_scroll = 0;
			scrollbar.width(scrollbar_w);
			handle.width(Math.max(scroll_unit, 16));
			handle.draggable({ containment: 'parent', 
				'drag': function(event, ui){ 
					var position = $(this).position();
					var x = position.left + ($(this).outerWidth()/2);
					var scrollx = Math.floor(x/scroll_unit);
					if(last_scroll != scrollx){
						// POSITION CONTAINER
						positionCnt(target, tot, items_w, scrollx);
						last_scroll = scrollx;
					}
					$('#dotnav li').removeClass('cur');
				}, 
				'stop': function(event, ui){
					var position = $(this).position();
					var x = position.left + ($(this).outerWidth()/2);
					var scrollx = Math.floor(x/scroll_unit);
					// POSITION SCROLLER
					var endx = scrollx * scroll_unit;
					if(endx >= target.width() - handle.width())
						endx = target.width() - handle.width();
					handle.stop().animate({ 
						left: endx+ "px"
					});
				}
			});
			if(!target.hasClass('landscape')){
				$("#dotnav li").click(function(){
					var scrollx = $(this).text()-1;
					$('#dotnav li').removeClass('cur');
					$(this).addClass('cur');
					if(last_scroll != scrollx){
						// POSITION CONTAINER
						positionCnt(target, tot, items_w, scrollx);
						// POSITION SCROLLER
						last_scroll = scrollx;
						var endx = scrollx * scroll_unit;
						if(endx >= target.width() - handle.width())
							endx = target.width() - handle.width();
						handle.stop().animate({ 
							left: endx+ "px"
						});
					}
				});
			}else{
				$("#dotnav li").click(function(){
					var ix = $(this).text()-1;
					$('#dotnav li').removeClass('cur');
					$(this).addClass('cur');
					if(viewerOpen==1){
						openDetail(ix);
					}else{
						var source = target.find('li a:eq('+ix+')');
						var scrollx = target.find('li').index(source.parent('li'));
						if(last_scroll != scrollx){
							// POSITION CONTAINER
							positionCnt(target, tot, items_w, scrollx);
							// POSITION SCROLLER
							last_scroll = scrollx;
							var endx = scrollx * scroll_unit;
							if(endx >= target.width() - handle.width())
								endx = target.width() - handle.width();
							handle.stop().animate({ 
								left: endx+ "px"
							});
						}
					}
				});
			}
		}
	});	
});


function positionCnt(target, tot, items_w, scrollx){
	var pos = target.find('li:eq('+scrollx+')').position();
	if(target.hasClass('portraits'))
		var pos_l = 12+pos.left;
	if(target.hasClass('landscape'))
		var pos_l = (items_w/(tot-1))*scrollx;
	else{
		var pos_l = pos.left;
		var pad_l = target.find('li:eq('+scrollx+')').css('padding-left');
		//pad_l.replace("px", '');
		pos_l = parseInt(pos_l) + parseInt(pad_l);
	}
	if(pos_l<12)
		pos_l = 12;
	if((pos_l>(target.find('.slider').width() - target.width()))&&(target.hasClass('landscape')))
		pos_l = (target.find('.slider').width() - target.width());
	target.find(".slider").stop().animate({ 
		left: -pos_l + "px"
	}, "slow", "swing");
}