var appsWidth;
var scrollDistance = 874;

function init() {
	$('#apps').scrollTo(0, 500, {axis:'x'});
	appsWidth = ($('#apps .group').size() * scrollDistance);
	
	$('#previous').click(function (e) { 
		checkArrows('previous');
		$('#apps').scrollTo('-='+scrollDistance+'px', 500, {axis:'x', onAfter: checkArrows});
		e.preventDefault();
    });
	
	$('#next').click(function (e) { 
		checkArrows('next');
		$('#apps').scrollTo('+='+scrollDistance+'px', 500, {axis:'x', onAfter: checkArrows});
		e.preventDefault();
    });
	
	$('#search_field').keyup(function(event){
		livesearch.onChange('search_field','search_clear');
	});
	livesearch.onChange('search_field','search_clear');
	
	setInterval ("autoScroll()", 5000);
}

function autoScroll() {
  if ($('#apps').scrollLeft() == appsWidth - scrollDistance - 4) {
    checkArrows('previous');
    $('#apps').scrollTo('0px', 1000, {axis:'x', onAfter: checkArrows});
  } else {
    checkArrows('next');
    $('#apps').scrollTo('+='+scrollDistance+'px', 500, {axis:'x', onAfter: checkArrows});
  }
}

function checkArrows(arrow) {
	if ($('#apps').scrollLeft() == 0 && $('#previous').css('display') == 'block')
		$('#previous').fadeOut();
	
	if ($('#apps').scrollLeft() == appsWidth - $('#apps').innerWidth() && $('#next').css('display') == 'block')
		$('#next').fadeOut();
	
	if (arrow == 'previous') {
		if ($('#apps').scrollLeft() - scrollDistance <= 0)
			$('#previous').fadeOut();
		
		if ($('#next').css('display') == 'none')
			$('#next').fadeIn();
	}
	
	if (arrow == 'next') {
		if ($('#apps').scrollLeft() + scrollDistance == appsWidth - $('#apps').innerWidth())
			$('#next').fadeOut();
		
		if ($('#previous').css('display') == 'none')
			$('#previous').fadeIn();
	}
}
window.onload = init;

function clearDefault(el) {
  if (el.defaultValue==el.value) el.value = ""
}


var livesearch = {};

livesearch.onChange = function (fldID, btnID) {
	var fld = document.getElementById( fldID );
	var btn = document.getElementById( btnID );
	if (fld.value.length > 0 && !this.clearBtn)
	{
		btn.style.backgroundPosition = "0 -19px";
		btn.fldID = fldID;
		btn.onclick = this.clearBtnClick;
		this.clearBtn = true;
	} else if (fld.value.length == 0 && this.clearBtn)
	{
		btn.style.backgroundPosition = "0 0";
		btn.onclick = null;
		this.clearBtn = false;
	}
}

livesearch.clearFld = function (fldID,btnID) {
	var fld = document.getElementById( fldID );
	fld.value = "";
	this.onChange(fldID,btnID);
}

livesearch.clearBtnClick = function () {
	livesearch.clearFld(this.fldID, this.id);
}

function theRotator() {
	//Set the opacity of all images to 0
	$('div#rotator ul li').css({opacity: 0.0});
	
	//Get the first image and display it (gets set to full opacity)
	$('div#rotator ul li:first').css({opacity: 1.0});
		
	//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('rotate()',6000);
	
}

function rotate() {	
	//Get the first image
	var current = ($('#rotator ul li.show')?  $('#rotator ul li.show') : $('#rotator ul li:first'));

	//Get next image, when it reaches the end, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('#rotator ul li:first') :current.next()) : $('#rotator ul li:first'));	
	
	//Set the fade in effect for the next image, the show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
};

$(document).ready(function() {		
	//Load the slideshow
	theRotator();
});