$(document).ready(function() {
	initSlider();
});

function initSlider() {
	$('#slider *').focus(function() { this.blur(); });
	var dragger = $('#slider_dragger');
	dragger.wrapInner('<span class="dragger_left"></span>');
	dragger.wrapInner('<span class="dragger_right"></span>');
	dragger.mousedown(function() {
		dragger.addClass('hover');
	});
	$(document).mouseup(function() {
		dragger.removeClass('hover');
	});
	dragger.draggable({ axis: 'x',
						containment: 'parent',
						drag: function() {
									dragOnce($(this));
								},
						stop: function() {
									dragger.removeClass('hover');
								}});
	dragger.data('captions', new Array());
	initTopSlide($('#slider_left'), -1);
	initTopSlide($('#slider_right'), 1);
	initBottomSlide($('#slider_bar_left'), -1);
	initBottomSlide($('#slider_bar_right'), 1);
	$('#slider_content').find('a').each(function() {
		var a = $(this);
		if (a.attr('name').length) {
			addSlideLink(a, dragger);
		}
	});
	dragOnce(dragger);
}

function addSlideLink(anchor, dragger) {
	var pos = anchor.position();
	var x = pos.left;
	var str = anchor.attr('name');
	var captions = dragger.data('captions');
	var surface = $('#slider_surface');
	var content = $('#slider_content');
	var cw = content.width() - surface.width() / 2 - 0;
	var p = x * 100 / cw;
	var dx = Math.round(p * (surface.width()) / 100) + 55;
	surface.append('<span id="s_' + captions.length + '" style="left:' + dx + 'px">' + str + '</span>');
	dragger.append('<span class="caption" id="p_' + captions.length + '">' + str + '</span>');
	var span = $('#s_' + captions.length);
	span.click(function() {
		clearInterval(dragger.data('iv'));
		var perc = (x - 3) * 100 / (content.width() - surface.width() - 28);
		dragger.data('iv', setInterval(function() {
											oneSlide(dragger, content, -x, true, perc);
										}, 10));
	});
	captions.push(captions.length);
	dragger.data('captions', captions);
}

function dragOnce(dragger) {
	var w = dragger.width();
	var maxw = dragger.parent().width();
	var min = 0;
	var max = maxw - w;
	var gridw = 150;
	var lx = parseInt(dragger.css('left'), 10);
	var percent = lx * 100 / max;
	var content = $('#slider_content');
	var ctw = content.width();
	var maxx = Math.min(0, maxw - ctw + 27);
	var dx = Math.round(percent * maxx / 100);
	clearInterval(dragger.data('iv'));
	dragger.data('iv', setInterval(function() {
										oneSlide(dragger, content, dx);
									}, 10));
	
	moveCaptions(dragger, lx);	
}

function moveCaptions(dragger, lx) {
	var captions = dragger.data('captions');
	for (var i=0; i<captions.length; i++) {
		var span = $('#s_' + i);
		var dspan = $('#p_' + i);
		var pos = span.position();
		var left = pos.left;
		var dist = (lx + dragger.width() / 2) - left;
		if (Math.abs(dist) < 70) {
			if (!dspan.data('on')) {
				dspan.fadeIn(200);
				dspan.data('on', true);
				//span.fadeTo(500, 0.2);
			}
			dspan.css('left', (dist / 3) + 'px');
		} else {
			if (dspan.data('on')) {
				dspan.fadeOut(200);
				dspan.data('on', false);
				//span.fadeTo(100, 1);
			}
		}
	}
}

function oneSlide(dragger, content, dx, moveDragger, percent) {
	var x = parseFloat(content.css('left'), 10);
	var ox = x;
	x += (dx - x) / 10;
	content.css('left', x + 'px');
	if (moveDragger) {
		var maxw = dragger.parent().width() - dragger.width();
		var dragx = parseFloat(dragger.css('left'), 10);
		dx = Math.round(percent * maxw / 100);
		dragx += (dx - dragx) / 10;
		dragger.css('left', dragx + 'px');
		moveCaptions(dragger, dragx);
	}
	var left = (parseInt(dragger.css('left'), 10) <= 0)? true : false;
	var right = (parseInt(dragger.css('left'), 10) >= dragger.parent().width() - dragger.width() - 2)? true : false;
	
	if (left) {
		if (!dragger.data('left')) {
			$('#slider_left').fadeOut(100);
		}
		dragger.data('left', true);
	} else {
		if (dragger.data('left')) {
			$('#slider_left').fadeIn(100);
		}
		dragger.data('left', false);
	}

	if (right) {
		if (!dragger.data('right')) {
			$('#slider_right').fadeOut(100);
		}
		dragger.data('right', true);
	} else {
		if (dragger.data('right')) {
			$('#slider_right').fadeIn(100);
		}
		dragger.data('right', false);
	}
	
	if (x == dx || x == ox) clearInterval(dragger.data('iv'));
}

function initTopSlide(obj, d) {
	obj.data('iv', 0);
	obj.mousedown(function() {
		topSlide(obj, d)
	});
	$(document).mouseup(function() {
		clearInterval(obj.data('iv'));
	});
}

function topSlide(obj, d) {
	clearInterval(obj.data('iv'));
	topSlideStep(obj, d);
	obj.data('iv', setInterval(function() {
									topSlideStep(obj, d);
								}, 350));
}

function topSlideStep(obj, d) {
	var dragger = $('#slider_dragger');
	var content = $('#slider_content');
	var maxw = content.parent().width();
	var gridw = 150;
	var ctw = content.width();
	var maxx = Math.min(0, maxw - ctw + 4);
	var lx = parseInt(content.css('left'), 10);
	var dx = Math.round(lx / gridw);
	dx -= d;
	if (d > 0) {
		if (dx == -1) {
			dx *= gridw * 2;
		} else {
			dx *= gridw;
		}
	} else {
		if (dx == -1) {
			dx == 0;
		} else {
			dx *= gridw;
		}
	}
	dx += 2;
	dx = Math.min(0, dx);
	dx = Math.max(maxx, dx);
	var percent = dx * 100 / maxx;
	clearInterval(dragger.data('iv'));
	dragger.data('iv', setInterval(function() {
										oneSlide(dragger, content, dx, true, percent);
									}, 10));
	
}

function initBottomSlide(obj, d) {
	var dragger = $('#slider_dragger');
	obj.data('iv', 0);
	obj.mousedown(function() {
		obj.data('iv', setInterval(function() {
										bottomSlide(dragger, d);
									}, 20));
		obj.addClass('hover');
	});
	$(document).mouseup(function() {
		clearInterval(obj.data('iv'));
		obj.removeClass('hover');
	});
}

function bottomSlide(obj, d) {
	var ol = parseInt(obj.css('left'), 10);
	d += ol;
	d = Math.min(d, 771);
	d = Math.max(d, 0);
	obj.css('left', (d) + 'px');
	dragOnce(obj);
}