$(document).ready (function () {
	var objects = $('div#slider div.slider-object').length;
	var object_width = parseInt ($('div#slider div.slider-object').css ('width')) + 0;
	var slider_width = ((object_width
			+ 0)
			* objects);

	$('div#slider').css ('width', slider_width);
	$('div#viewport').data ('at_position', 0);
	
	$('div#viewport').data ('skip', true);
	
	$('div#viewport').at_intervals (function () {
		slide ('right', true);
		return true;
	},
	{ 'delay': 5000,
	  'name': 'autoslide' }, 2000);
	});

	$(document).ready (function () {
	$('div.control').click (function () {
		var dir = $(this).attr ('title');
		slide (dir, false);
	});
	
});

function slide (dir, auto)
{
	var objects = $('div#slider div.slider-object').length;
	var viewport_width = parseInt ($('div#viewport').css ('width'));
	var object_width = parseInt ($('div#slider div.slider-object').css ('width')) + 0;
	var slider_width = ((object_width
			+ 0)
			* objects);
	var pos = $('div#viewport').data ('at_position');
	var visible = Math.round (viewport_width / object_width);
	
	if ($('div#viewport').data ('skip') == true)
	{
		$('div#viewport').data ('skip', false);
		return;
	}
	
	if (auto == false)
	{
		$('div#viewport').data ('autoslide').should_pause = true;
	}

	switch (dir)
	{
		case 'left':	pos = (pos - 1 < 0) ? (objects - visible) : (pos - 1);
				break;
		case 'right':	pos = (pos + 1 > objects - visible) ? 0 : pos + 1;
				break;
		default:	alert ('this should not happen!'); break;
	}

	$('div#viewport').data ('at_position', pos);
	var left = -(pos * object_width);
	$('div#slider').animate ({'left': left});
}

$(document).ready (function () {
	
	$('div.productbox').mouseover(function() {
		var rel = $(this).attr ('title');
		
		if(rel == "seo")
		{
			$('div.dot-0').click();
			var sspos = 0;
			$('div#ssviewport').data ('at_position', sspos);
		}
		else if(rel == "sea")
		{
			$('div.dot-1').click();
			var sspos = 1;
			$('div#ssviewport').data ('at_position', sspos);
		}
		else if(rel == "website")
		{
			$('div.dot-2').click();
			var sspos = 2;
			$('div#ssviewport').data ('at_position', sspos);
		}
		else
		{
			return false;
		}
		
	});
	
	$('div.productbox').mouseout(function() {
		$('div#ssviewport').data ('autoslide').should_pause = false;
	});
	
	var ssobjects = $('div#ssslider div.slider-object').length;
	var ssobject_width = parseInt ($('div#ssslider div.slider-object').css ('width')) + 0;
	var ssslider_width = ((ssobject_width
			+ 0)
			* ssobjects);

	$('div#ssslider').css ('width', ssslider_width);
	$('div#ssviewport').data ('at_position', 0);
	
	$('div.dot').click( function () {
		if($(this).hasClass('active'))
		{
			return false;
		}
		
		var ssdir = $(this).attr ('title');
		ssslide ('left', false, ssdir);
	});

	$('div#ssviewport').data ('skip', true);
	
	$('div#ssviewport').at_intervals (function () {
		ssslide ('right', true, false);
		return true;
	},
	{ 'delay': 9000,
	  'name': 'autoslide' }, 9000);
	  
});

function ssslide (ssdir, auto, ssgoto)
{
	var ssobjects = $('div#ssslider div.slider-object').length;
	var ssviewport_width = parseInt ($('div#ssviewport').css ('width'));
	var ssobject_width = parseInt ($('div#ssslider div.slider-object').css ('width')) + 0;
	var ssslider_width = ((ssobject_width
			+ 0)
			* ssobjects);
	var sspos = $('div#ssviewport').data ('at_position');
	var ssvisible = Math.round (ssviewport_width / ssobject_width);

	if ($('div#ssviewport').data ('skip') == true)
	{
		$('div#ssviewport').data ('skip', false);
		return;
	}
	
	if (auto == false)
	{
		$('div#ssviewport').data ('autoslide').should_pause = true;
	}
	
	switch (ssdir)
	{
		case 'left':	sspos = (sspos - 1 < 0) ? (ssobjects - ssvisible) : (sspos - 1);
				break;
		case 'right':	sspos = (sspos + 1 > ssobjects - ssvisible) ? 0 : sspos + 1;
				break;
		default:	break;
	}
	
	if(ssgoto)
	{
		$('div#ssviewport').data ('autoslide').should_pause = true;
		sspos = ssgoto;
	}
	
	$('div#dotcontainer div.active').removeClass('active');
	$('div#dotcontainer div.dot-'+sspos).addClass('active');
	
	$('div#ssviewport').data ('at_position', sspos);
	var ssleft = -(sspos * ssobject_width);
	$('div#ssslider').animate ({'left': ssleft});
}