/**
 * @author luke.cuthbertson <luke.cuthbertson@heathwallace.com>
 * @projectDescription
 * @version 0.1
 * @date
 */
(function($){
	$.fn.buildCardSlider = function(){
		
		return this.each(function(){
			var container = $(this);
			
			//gather content
			var heading = container.find('h2:first');
			var heading_text = container.find('p:first');
			$(container.find('.premierRow:first')).remove();
			var card_headings = container.find('h2');
			var card_img = container.find('img.fullSize');
			var card_text = container.find('.contentText');

			//now all the content has been gathered the old container can be remove and the rebuilding process can start
			$(container.empty().removeAttr('id').addClass('premierRow'))
				.append('<div id="cardSlider"><div id="cardSliderInner01"><div id="cardSliderInner02"></div></div></div>');
			
			var content_container = $(container.find('#cardSliderInner02'));
			card_headings.each(function(i){
				var card_container = $('<div class="card" id="card'+ (i+1) +'"><div class="cardInner"></div></div>').appendTo(content_container).children();
				card_container.append('<h2>'+$(this).text()+'</h2>')
					.append(card_img.eq(i))
					.append('<div class="premierCol contentText">'+card_text.eq(i).html());
					
			});
			//build the shoe
			var shoe_container = $('<div id="shoe"><div class="cardInner"></div></div>').appendTo(content_container).children();
			shoe_container.append('<h2>'+heading.html()+'</h2>')
				.append('<p>'+heading_text.html()+'</p>')
				.append('<a class="bulletLink">Rollover the images<br />to find out more</a>');
			//start the card slider script
			container.cardSlider();
			
		});
	},
	
	$.fn.cardSlider = function(){
		
		var container = $(this);
		var $cards = container.find('div.card');
		var cards = [];
		var rightStops = [0, 475, 491];
		var leftStops = [0, 16, 32];
		
		function controller(card, methodName){
			if (methodName == 'slideOut') {
				for (var i = $cards.index(card.elem) - 1; i >= 0; i--) {
					cards[i]['slideOut'](true);
				}
				for (var i = $cards.index(card.elem) + 1; i < cards.length; i++) {
					cards[i]['slideIn'](true);
				}				
			}
			if(methodName == 'slideBack'){
				for (var i = 0; i < cards.length; i++) {
					if(cards[i] != card){
						cards[i].slideBack(true);
					}
				}
			}
		}
		
		function Card(elem, rightStop, leftStop){
			var obj = this;
			this.elem = elem;
			this.startPos = this.elem[0].offsetLeft;
			this.rightStop = rightStop;
			this.leftStop = leftStop;
			
			this.elem.mouseenter(function(){
				obj.slideOut();
				obj.elem.addClass('hover');
			})
			.mouseleave(function(){
				obj.slideBack();
				obj.elem.removeClass('hover');
			});
		}
		
		Card.prototype = {
			
			slideOut: function(nonotify){
				var obj = this;
				this.elem.stop().animate({left: this.leftStop}, function(){
					obj.elem.addClass('open');
				});
				if (!nonotify) {
					this.notify('slideOut');
				}
			},
			
			slideBack: function(nonotify){
				this.elem.removeClass('open');
				this.elem.stop().animate({left: this.startPos});
				if (!nonotify) {
					this.notify('slideBack');
				}
			},
			
			slideIn: function(nonotify){
				this.elem.stop().animate({left: this.rightStop}); 
				if (!nonotify) {
					this.notify('slideIn');
				}
			},
			
			notify: function(methodName){
				if (controller) {
					controller(this, methodName);
				}
			}
			
		}
		
		$cards.each(function(i){
			cards.push(new Card($(this), rightStops[i], leftStops[i]))
		});

		return container;
		
	}
	
})(jQuery);