$(document).ready(function() {
var selector = "#slider";
var element = ".item";
var span_selector = ".text-slider";

$.fn.position2 = function(options) {
	return this.position($.extend({
		of: $(selector),
		using: function(to) {
			$(this).css({
				top: to.top,
				left: to.left
			})
		},
		collision: "none"
	}, options));
}

$(window).resize(function() {
	define_position();
	
});

$(selector).css({
	overflow: "hidden"
})
$(selector).css({
	position: "relative",
});
$(selector + " " + element).css({
	position: "absolute",
});

define_position();

function animate(to) {
	$(this).stop().animate(to);
}

function animate_span(span){
	span.css('left','-' + $(window).width() + 'px');
	span.css('margin-left','-' + (offset - 390) + 'px');
	span.css('opacity','0');
	span.addClass('current');
	span.animate({'left' : '-420px',opacity : '1'},500)
}

function next() {
	var offset = get_offset() + 70;
	//$(selector + " img:eq(2)").center(animate);
	//$(selector + " img:eq(1)").left(animate);
	$(selector + " " + element + ":eq(0)").hide().appendTo(selector);
	$(selector + " " + element + ":eq(0)").left(animate);
	$(selector + " " + element + ":eq(1)").center(animate);
	$(selector + " " + element + ":eq(2)").right(animate);
	var span = $(selector + " " + element + ":eq(1)").children(span_selector);
	animate_span(span);
	
	action();
}

function previous() {
	$(selector + " " + element).children(span_selector).removeClass('current');
	$(selector + " " + element + ":eq(0)").center(animate);
	
	//$(selector + " " + element + ":eq(0)").children(span_selector).addClass('current');
	animate_span($(selector + " " + element + ":eq(0)").children(span_selector));
	
	$(selector + " " + element + ":eq(1)").right(animate);
	$(selector + " " + element + ":eq(2)").hide().appendTo(selector);
	$(selector + " " + element + ":eq(2)").prependTo(selector).left(animate);
	
	action();
}

function action(){

	$('.right').unbind('click');
	$('.left').unbind('click');
	$('.center').unbind('click');

	$('.right').click(function(){
		next();
	});
	
	$('.left').click(function(){
		previous();
	});
}

action();

function get_offset(){
	var window_width = $(window).width();
	var offset = parseInt((window_width - 660) / 2);
	return offset;
}

function define_position(){
	
	offset = get_offset();
	
	$.fn.left = function(using) {
		$(this).addClass('left');
		$(this).removeClass('right');
		$(this).removeClass('center');
		$(this).children(span_selector).removeClass('current');
		return this.position2({
			my: "right middle",
			at: "left middle",
			offset: offset + " 0",
			using: using
		});
	}
	$.fn.right = function(using) {
		$(this).removeClass('left');
		$(this).addClass('right');
		$(this).removeClass('center');
		$(this).children(span_selector).removeClass('current');
		return this.position2({
			my: "left middle",
			at: "right middle",
			offset: "-" + offset + " 0",
			using: using
		});
	}
	$.fn.center = function(using) {
		$(this).removeClass('left');
		$(this).removeClass('right');
		$(this).addClass('center');
		return this.position2({
			my: "center middle",
			at: "center middle",
			using: using
		});
	}
	$.fn.hide = function(using) {
		$(this).children(span_selector).removeClass('current');
		return this.position2({
			my: "left middle",
			at: "right middle",
			offset: "10 0",
			using: using
		});
	};
	
	$(selector + " " + element).hide();
	$(selector + " " + element + ":eq(0)").left();
	$(selector + " " + element + ":eq(1)").center();
	$(selector + " " + element + ":eq(2)").right();
	animate_span($(selector + " " + element + ":eq(1)").children(span_selector));
	//$(selector + " " + element + ":eq(1)").children(span_selector).addClass('current');
}

});