var j = jQuery.noConflict();

var currentPosition = 0;
var qtde_exibe = 2;	
var slideWidth = 150;
var slides = j('.slider_image');
var numberOfSlides = slides.length;
	
j(function(){

	// Remove scrollbar in JS
	j('#slider_group').css('overflow', 'hidden');
	
	// Wrap all .slides with #slideInner div
	setInterval(moveSlider, 3000, 'slider_right');
	
	// Set #slideInner width equal to total width of all slides
	renderSlider();
	
	// Hide left arrow control on first load
	//manageControls(currentPosition);
	
	// Create event listeners for .controls clicks
	j('.slider_control')
		.bind('click', function(){
			id = j(this).attr('id');
			moveSlider(id);	
	});	
});
	
function moveSlider(id) {
	// Determine new position
	if(id == 'slider_left' && currentPosition > 0) {
		currentPosition = currentPosition - 1;			
		j('#slideInner').animate({
			'marginLeft' : (slideWidth + 20) *(-currentPosition)
		});
	} else {			
		if(id == 'slider_right' && currentPosition < Math.ceil(j('.slider_image').length/qtde_exibe)) {
			currentPosition = currentPosition + 1;			
			j('#slideInner').animate({
				'marginLeft' : (slideWidth + 20) *(-currentPosition)
			});	
		}
	}
}

function renderSlider() {

	j('.slider_image')
		.wrapAll('<div id="slideInner"></div>')
		// Float left to display horizontally, readjust .slides width
		.css({
			'float' : 'left',
			'width' : j('.slider_image').width
		});
	
	j('#slideInner').css('width', (220 + 20) * j('.slider_image').length);
}