var Planeffect = window.Planeffect || {};

Planeffect.Product = function(){
	var ie8 = false;
	var $body, $wrapper, $container, $ul, $lis, $indicator_container, $current_indicator, $prev, $next,
		$fullscreen_image, $fullscreen_actions, $current_fullscreen_indicator, $fullscreen_prev, $fullscreen_next;
	var body_class = '';
	var images = [];
	var thumbs = [];
	var nb_images = 0;
	
	var current_image = 1;
	var timeout;
	var li_width = 500;
	var new_speed = 1000;
	
	var setTable = function(){
		$specs = $('#tab-specificaties')
		$specs.find('tr:odd').addClass('odd');
		$specs.find('tr:even').addClass('even');
		$specs.find('tr:first-child').addClass('first');
		$specs.find('tr:last-child').addClass('last');
		$specs.find('tr td:first-child').addClass('first');
	};
	
	var getImages = function(){
		$lis.find('a').each(function(){
			var $a = $(this);
			images.push($a.attr('href'));
			thumbs.push($a.attr('rel'));
			$a.click(enterFullscreen);
		});
		nb_images = images.length;
		setIndicators();
		setNav();
	};
	
	var setIndicators = function() {
		$indicator_container = $('#product-thumbs');
		
		$indicator = $('<a class="product-thumb" href="#" />');
		for (i=0; i<nb_images; i++) {
			index = parseInt(i)+1;
			var $ir = $indicator.clone().click(indicatorClick).css({backgroundImage: 'url('+thumbs[i]+')'}).attr('data-index', index);
			if (index == current_image) {
				$ir.addClass('active');
				$current_indicator = $ir;
			}
			$indicator_container.append($ir);
		}
	};
	
	var setFullscreenIndicators = function() {
		var $irc = $('<div id="fullscreen-indicator-container" />').css({
			float: 'right',
			margin: '0 10px 0 0'
		});
		
		var $preload = $('<img />').css({display: 'none'});
		$indicator = $('<a class="product-fullscreen-indicator" href="#" />');
		for (i=0; i<nb_images; i++) {
			index = parseInt(i)+1;
			var $ir = $indicator.clone().click(fullscreenIndicatorClick).attr('data-index', index);
			if (index == current_image) {
				$ir.addClass('active');
				$current_fullscreen_indicator = $ir;
			}
			$irc.append($ir, $preload.clone().attr('src', images[i]));
		}
		$fullscreen_actions.append($irc);
	};
	
	var indicatorClick = function(e) {
		e.preventDefault();

		newImage($(this).attr('data-index'));
	};
	
	var fullscreenIndicatorClick = function(e) {
		e.preventDefault();
		
		newFullscreenImage($(this).attr('data-index'));
	};
	
	var setNav = function() {
		if (nb_images > 1) {
			$prev = $('<a id="pr-prev" />').click(prev);
			$next = $('<a id="pr-next" />').click(next);
			
			$container.append($prev, $next);
		}
	};
	
	var setFullscreenNav = function() {
		$fullscreen_prev = $('<a id="fullscreen-prev" />').click(prevFullscreen);
		$fullscreen_next = $('<a id="fullscreen-next" />').click(nextFullscreen);
		
		$wrapper.append($fullscreen_prev, $fullscreen_next);
	};
	
	var enterFullscreen = function(e) {
		e.preventDefault();
		
		body_class = $body.attr('class');
		$body.removeAttr('class');
		
		$fullscreen_actions = $('<div id="product-fullscreen-actions" />').css({
			bottom: '50px',
			position: 'absolute',
			right: '20px',
			width: '500px',
			zIndex: 12
		});
		
		$fullscreen_image = $('<div id="product-fullscreen" />').css({
			position: 'absolute',
			left: '0',
			top: '0',
			width: '100%',
			height: '100%',
			background: 'url('+images[current_image-1]+') center center fixed no-repeat',
			'-moz-background-size': 'cover',
			backgroundSize: 'cover',
			'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+images[current_image-1]+"', sizingMethod='scale')",
			'-ms-filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+images[current_image-1]+"', sizingMethod='scale')",
			zIndex: 11
		});
		
		if (nb_images > 1) {
			$next.hide();
			$prev.hide();
		}
		
		var $fullscreen_exit = $('<a class="exit" />').css({
			background: 'url(/images/fullscreen_exit.png) no-repeat',
			cursor: 'pointer',
			display: 'block',
			float: 'right',
			height: '26px',
			margin: '-10px 0 0 5px',
			width: '83px'
		}).click(exitFullscreen);
		$fullscreen_actions.append($fullscreen_exit);
		$wrapper.append($fullscreen_image, $fullscreen_actions);
		
		if (nb_images > 1) {
			setFullscreenNav();
			setFullscreenIndicators();
		}
	};
	
	var exitFullscreen = function() {
		$fullscreen_image.fadeOut(750, function(){$(this).remove();});
		$fullscreen_actions.fadeOut(function(){$(this).remove();});
		$fullscreen_prev.fadeOut(1500, function(){$(this).remove();});
		$fullscreen_next.fadeOut(1500, function(){$(this).remove();});
		
		if (nb_images > 1) { 
			$next.show();
			$prev.show();
		}
		
		$body.addClass(body_class);
	};
	
    var getLeftMargin = function() {
    	return -(li_width)*(current_image-1);
    };
    
	var newImage = function(index) {
		if (index > nb_images) {
			current_image = 1;
		} else if (index < 1) {
			current_image = nb_images;
		} else {
			current_image = index;
		}
		
		$ul.stop().animate({marginLeft: getLeftMargin()}, 500, 'easeInOutCirc');
		
		$current_indicator.removeClass('active');
		$current_indicator = $('.product-thumb[data-index="'+(current_image)+'"]');
		$current_indicator.addClass('active');
	};
	
	var prev = function() {
		newImage(--current_image);
	};
	
	var next = function() {
		newImage(++current_image);
	};
	
	var newFullscreenImage = function(index) {
		if (index > nb_images) {
			current_image = 1;
		} else if (index < 1) {
			current_image = nb_images;
		} else {
			current_image = index;
		}
		
		$fullscreen_image.css({
			backgroundImage: 'url('+images[current_image-1]+')',
			'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+images[current_image-1]+"', sizingMethod='scale')",
			'-ms-filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+images[current_image-1]+"', sizingMethod='scale')"
		});

		$current_fullscreen_indicator.removeClass('active');
		$current_fullscreen_indicator = $('.product-fullscreen-indicator[data-index="'+(current_image)+'"]');
		$current_fullscreen_indicator.addClass('active');
	};
	
	var prevFullscreen = function() {
		newFullscreenImage(--current_image);
	};
	
	var nextFullscreen = function() {
		newFullscreenImage(++current_image);
	};
	
	return {
		init: function(){
			if (typeof window.lte_ie8 != 'undefined') {
				ie8 = true;
			}
			setTable();
			
			$body = $('body');
			$wrapper = $body.find('#wrapper');
			$container = $wrapper.find('#tab-fotos-container');
    		$ul = $container.find('#product-images');
    		$lis = $ul.find('li');
    		
    		getImages();
		},
		
		listHover: function() {
			$('.product-list-item').hover(function(){
				$(this).find('div').stop(true, true).fadeIn(250);
			}, function(){
				$(this).find('div').stop(true, true).fadeOut(250);
			});
		},
		
		destroy: function() {
			
		}
	}
}();