$( document ).ready
	( 	
		function()
		{
			BASE_URL = "http://shop.rubs.de/";
			loadData( "/api/json/article" );
		}
	);
	
	
	/**
	 *	Loads json data from a specific url
	 */
	function loadData( url )
	{
		var result = false;
		
		var Params = {};
		Params.type = "GET";
		Params.url = url;
		Params.processData = true;
		Params.dataType = "json";
		Params.success = parseData;
		Params.error = handleError;
		
		$.ajax(Params);
	}


	/**
	 *	Iterates over the json objects and creates the slides.
	 */
	function parseData ( json )
	{
		if ( json.length <= 1 )
		{
			handleError();
			return;
		}
		
		var content = "";
		var counter = 0;
		
		for ( i = 0; i < json.length; i++ )
		{
			if( i % 3 == 0 )
			{
				content += "<div class='slide'>";
			}
	
			content += "<div class='article'><a href='" + BASE_URL + json[i].oxseourl + "' title='" + json[i].oxtitle + "'><img src='" + json[i].oxpic8 + "' alt='" + json[i].oxtitle + "' /></a></div>";
			counter++;
	
			if( counter == 3 )
			{
				content += "</div>";
				counter = 0;
			}
		}

		if( $("#slidesContainer").html( content ) ) initSlider();
	}


	/**
	 *	Called in case of an error.
	 */
	function handleError()
	{
		$("#slidesContainer").html( '<div style="text-align: center; margin-top: 50px; font-weight: bold;">Es wurden keine Produkte gefunden.</div>' );
	}
	
	
	/**
	 *	Add controls and the single slides to the slider.
	 */
	function initSlider()
	{
		var currentPosition = 0;
		var slideWidth = 560;
		var slides = $('.slide');
		var numberOfSlides = slides.length;	  
		
		$('#slidesContainer').css('overflow', 'hidden');
	
		slides.wrapAll('<div id="slideInner"></div>')
		.css({
			'float' : 'left',
			'width' : slideWidth
		});
	
		$('#slideInner').css('width', slideWidth * numberOfSlides);
		
		$('#slidesContainer').prepend('<span class="control" id="leftControl">Move left</span>')
    	$('#slidesContainer').append('<span class="control" id="rightControl">Move right</span>');
	
		manageControls(currentPosition);
	
		$('.control').bind('click', function()
	    {
		    currentPosition = ( $(this).attr('id')=='rightControl' ) ? currentPosition+1 : currentPosition-1;
	
		    manageControls( currentPosition );
		    $('#slideInner').animate
		    ({
		    	'marginLeft' : slideWidth * ( -currentPosition )
		    });
		});
	
		function manageControls(position)
		{
			if( position==0 ){ $('#leftControl').hide() }
		    else{ $('#leftControl').show() }
	
		    if( position == numberOfSlides )
			{
				$('#leftControl').hide()
				$('#slideInner').animate( {'marginLeft' : 0} );
				currentPosition = 0;
				position = 0;
			}
		    else{ $('#rightControl').show() }
	    }
	}