"use strict";

/*globals $, jQuery, window, document */

(function () {
	var wrapper, current = 0, boxes, overlay;

	function getNextIndex() {
		return (current + 1) >= boxes.length ? 0 : current + 1;
	}

	function getPrevIndex() {
		return (current - 1) < 0 ? 0 : current - 1;
	}

	function getWidths(index) {
		var width = 0, padding = 0;
		
		if (index) {
			boxes.each(function (i) {
				if (i < index) {
					width = width + parseInt($(this).width(), 10);
					padding = padding + 20;
				}
			});
		}
		
		return (width - (width * 2)) - (padding + 10);
	}

	function setMeta(index) {
		var ref = boxes.eq(index), title, body;
		
		title = ref.find('h4').find('span').eq(0).text();
		body = ref.find('p').text();
		
		
		boxes.eq(index)
			.find('.hover')
				.show()
			.end()
			.addClass('on')
			.siblings()
				.removeClass('on')
				.find('.hover')
					.hide()
				.end();		
		wrapper
			.find('.featured_meta')
				.find('h3')
					.find('span')
						.text(body) 
					.end()
				.end()
				.find('h4')
					.find('span.title')
						.text(title)	
					.end()		
				.end()
			.end()					
			.find('.overlay')
				.find('.meta')
					.find('p')
						.text(body) 
					.end()
					.find('h3')
						.text(title)		
					.end()
				.end()	
			.end();			
	}

	function bindEvents(callback) {
		var collection = wrapper.find('.carousel').find('ul');
	
		overlay
			.find('.close')
				.click(function () {
					overlay						
						.fadeOut(function () {
							$(this).find('.image_canvas').html('').end();
						})
						
				});	
	
		wrapper
			.find('.prev')
				.click(function () {
					var distance, index = getPrevIndex();
					
					if (boxes.length > 3) {
						distance = getWidths(index < boxes.length - 3 ? index : boxes.length - 4);
						collection.animate({
							left : distance + 'px'
						}, function () {
							setMeta(index);
							current = index;
						});
					}	 
				})
			.end()
			.find('.next')
				.click(function () {
					var distance, index = getNextIndex();					
	
					if (boxes.length > 3) {
						distance = getWidths(index < boxes.length - 3 ? index : boxes.length - 4);
						collection.animate({
							left : distance + 'px'
						}, function () {
							setMeta(index);
							current = index;
						}); 							
					}
				})
			.end()		
			.find('.carousel')
				.find('li')
					.click(function () {
						var item = boxes.index(this);
						
						current = item - 1;
						
						if (item > current) {
							wrapper.find('.next').trigger('click');
						} else {
							wrapper.find('.prev').trigger('click');
						}
					})
					.hover(
						function () {
							var elem = $(this);
							elem
								.find('.hover')
									.show();
						}, 
						function () {
							var elem = $(this);
							
							if (!elem.hasClass('on')) {
								elem
									.find('.hover')
										.hide();
							}				
					})
					.find('img')
						.bind('load', function () {
							$(this).fadeIn(function () {
								elem = $(this).closest('li');
								elem
									.find('.hover')
										.css({
											'width' : (parseInt($(this).width(), 10) + 20) + 'px'
										})
							});
						})
					.end()
					.find('a')
						.click(function () {
							var temp = $(this).parent().find('img').attr('src');
							temp = temp.replace(/small/gi, 'big');
							
							overlay.fadeIn(function () {
								overlay
									.find('.image_canvas')
										.html($('<img src="' + temp + '" />')
													.bind('load', function () { 
														var img = $(this);
														
														overlay.find('.meta').css('width', img.width());
														img.fadeIn(); 
													}));							
							}); 
						});		
						
		callback();				
	}

	$(document).ready(function () {
		wrapper = $('.press_content');
		overlay = wrapper.find('.overlay');
		boxes = wrapper.find('.carousel').find('li');
		
		setMeta(0);
		
		bindEvents(function () {
			boxes.eq(0).trigger('mouseover');	
		});

	});
}());