(function($){
	$.jqMovingPanels = function(el, options)
	{
		var base = this;
		
		base.contextEl = $(el);
		base.curPanel = 2;
		
		//Back to default width
		base.defaultWidth = function(element)
		{
			$(element, base.container).animate({ width : base.defWidth })
				.find('img.toAnimate').animate({ width : base.defImgWidth });
		};
	
		//Increase width
		base.increaseWidth = function(element, toLeft)
		{
			$(element, base.container).animate({ width : base.incWidth })
				.find('img.toAnimate').animate({ width : base.incImgWidth }, function(){
					//Change data value
					base.contextEl.data('movingPanels', false);
					
					//Hide left arrow
					if(base.curPanel == 0)
					{
						$(base.options.leftArrow).hide();
					}
					//Hide right arrow
					if(base.curPanel == base.totalPanels - 1)
					{
						$(base.options.rightArrow).hide();
					}
				});
		};
		
		//Toggle panels
		base.togglePanels = function(toLeft)
		{
			if((toLeft && !(base.curPanel < base.totalPanels - 1)) || (!toLeft && (base.curPanel <= 0)))
			{ 
				return; 
			};	
			
			if(!base.contextEl.data('movingPanels'))
			{
				$(base.options.leftArrow).show();
				$(base.options.rightArrow).show();
				
				//Change data value
				base.contextEl.data('movingPanels', true);
				
				var next = toLeft ? base.curPanel + 1 : base.curPanel - 1,
				curLeftValue = base.container.css('left'),
				animateValue = toLeft ? parseFloat(curLeftValue, 10) - base.options.leftValue : parseFloat(curLeftValue, 10) + base.options.leftValue;
				
				//Animate container
				base.container.animate({ 'left' : animateValue });
				
				//Animate panels
				base.defaultWidth(base.panels.get(base.curPanel));
				base.increaseWidth(base.panels.get(next), toLeft);

				//Set curPanel
				base.curPanel = next;
				
				$(base.panels.get(base.curPanel - 1), base.container).unbind().click(function(){ 
					base.togglePanels(true); 
				});
		
				$(base.panels.get(base.curPanel + 1), base.container).unbind().click(function(){ 
					base.togglePanels(false); 
				}); 
				
				$(base.panels.get(base.curPanel), base.container).unbind();
			}
		};
		
		//Attach events
		base.setEvents = function()
		{
			//Panels events
			$(base.panels.get(base.curPanel - 1), base.container).click(function(ev){ 
				ev.preventDefault();
				base.togglePanels(true); 
			});
			
			$(base.panels.get(base.curPanel + 1), base.container).click(function(ev){ 
				ev.preventDefault();
				base.togglePanels(false); 
			});
			
			//Arrows events
			$(base.options.rightArrow, base.contextEl).click(function(ev){
				ev.preventDefault();
				base.togglePanels(true); 
			});
			
			$(base.options.leftArrow, base.contextEl).click(function(ev){ 
				ev.preventDefault();
				base.togglePanels(false); 
			});
		}
		
		//Build panels
		base.buildMovingPanels = function()
		{
			var objLength = JSONProj.length, 
				toAppend = $('.movinPanelsContainer', base.contextEl);
			
			for(var i = 0; i <= objLength - 1; i++)
			{
				var movingPanel = $(document.createElement('div')).addClass('movingPanel'),
					inside = $(document.createElement('div')).addClass('inside'),
					insideLink = $(document.createElement('a')).attr('href', JSONProj[i].link);
				
				inside.append(insideLink);
				insideLink.append($(document.createElement('img')).attr({'src' : JSONProj[i].imageSrc, 'class' : 'toAnimate'}), $(document.createElement('img')).attr('src', JSONProj[i].logo), $(document.createElement('p')).text(JSONProj[i].minidescr));
				movingPanel.append(inside);
				toAppend.append(movingPanel);
			}
		}
		
		//Behaves like a constructor
		base.init = function()
		{
			base.buildMovingPanels();
			
			//Get script options
			base.options = $.extend($.jqMovingPanels.defaultOptions, options);
			
			//Associate data
			base.contextEl.data('movingPanels', false);
			
			//Total moving panels
			base.totalPanels = $('.movinPanelsContainer', base.contextEl).children().length;
			
			//Defaults width
			base.defWidth = $('.movingPanel', base.contextEl).width();
			base.defImgWidth = $('.movingPanel img.toAnimate', base.contextEl).width();
			
			//Get panels and container
			base.panels	= $('.movinPanelsContainer > .movingPanel', base.contextEl);
			base.container = $('.movinPanelsContainer', base.contextEl);
			
			//Get increase width
			base.incWidth = (base.defWidth * base.options.increaseRatio);
			base.incImgWidth = (base.defImgWidth * base.options.increaseRatio);
			
			//Set container width and left value
			base.container.css({
				'width' : (($(base.panels.get(0)).outerWidth() * base.totalPanels) + (base.incWidth - base.defWidth) + 10) + 'px',
				'left' : '-' + base.incWidth + 'px'
			});
			
			//Float panels
			base.panels.css({
				'float' : 'left',
				'position' : 'relative'
			});
			
			//Attach events
			base.setEvents();
			
			//First animation
			base.increaseWidth(base.panels.get(base.curPanel));
		};
		
		//Initialize object
		base.init();
	}
	
	$.jqMovingPanels.defaultOptions = {
		leftValue : 200,
		increaseRatio : 1.4,
		leftArrow : '.leftButton',
		rightArrow : '.rightButton'
	};

	$.fn.jqMovingPanels = function(options)
	{
		return this.each(function(){
			(new $.jqMovingPanels(this, options));
		});
	};
})(jQuery);