var _id = ['#preloader1', '#preloader2', '#preloader3'];
var _imageWidth = 31;
var _imageHeight = 31;
var _numberOfImages = 5;
var _backgroundImage = '/media/28173/preloaderfinal.png';
var _intervalInMilisec = 1000;
var _position = 0;
var _nr = 0;
var _currentContainer = 0;
var _interval = 0;
			
function preloadStart() {
	_position = _numberOfImages * _imageWidth;

	$(_id[_currentContainer]).css("width", _imageWidth);
	$(_id[_currentContainer]).css("height", _imageHeight);
	$(_id[_currentContainer]).css("background", "url('" + _backgroundImage + "')");	

	_interval = setInterval("preloadAdvanceFrame()", _intervalInMilisec);
}

function preloadAdvanceFrame() {
	$(_id[_currentContainer]).css("background-position", _position + "px 0");

	if (_position == 0) {
		_position = _numberOfImages * _imageWidth;
		_currentContainer++;

		if (_currentContainer == _id.length)
			_currentContainer = 0;

		for (i = 0; i < _id.length; i++) {
			if (i != _currentContainer) {
				$(_id[i]).css("background-position", "0 0");
			}
			else {
				$(_id[i]).css("background-position", _position + "px 0");
				slideSwitch();
			}
		}
	}

	_position -= _imageWidth;
}

function slideSwitch() {
	var $active = $('#slideshow DIV.active');

    	if ($active.length == 0) $active = $('#slideshow > DIV:last');

    	// use this to pull the divs in the order they appear in the markup
    	var $next =  $active.next().length ? $active.next() : $('#slideshow > DIV:first');

   	$active.addClass('last-active');

    	$next.css({opacity: 0.0})
        	.addClass('active')
       		.animate({opacity: 1.0}, 1000, function() {
            		$active.removeClass('active last-active');
        	}
	);
}

function slide(number) {
	_currentContainer = number;

	_position = _numberOfImages * _imageWidth;

	$(_id).each(function(i) {
		if (i != _currentContainer) {
			$(_id[i]).css("background-position", "0 0");
		}
	});

	var $active = $('#slideshow DIV.active');

	var $main = $('#slideshow').children('DIV');

    	var $next  = $($main[number]);

	if ($next != $active) {
   		$active.addClass('last-active');

    		$next.css({opacity: 0.0})
        		.addClass('active')
       			.animate({opacity: 1.0}, 1000, function() {
            			$active.removeClass('active last-active');
        		}
		);
	}

	return false;
}

$(document).ready(preloadStart());