/*$(function() {
	$('a.lightbox').lightBox();
});*/


var tu = window.tu || {};

tu.depthCarousel = (function($) {
	var self = {};
	self.init = function($phoneCarousel, settings) {
		var $carouselIndicator = $phoneCarousel.children('.carousel-indicator:first'), 
			$phones = $phoneCarousel.children('.image-container:first'),
			$phoneModules = $phones.children('.image-module'),
			$devices = $phones.find('.images'),
			$baseDevice = $devices.eq(0),
			_startDeviceWidth = settings.imgWidth,
			_startDeviceHeight = settings.imgHeight,
			_numPhoneModules = $phoneModules.length,
			_singlePhone = _numPhoneModules < 2,
			_showAllPhones = tu.depthCarousel_show_all,
			_endWidth,
			_endHeight,
			_endLeft,
			_endBottom,
			_isAnimating = false,
			_depthRatio = $phoneCarousel.hasClass('small') ? 0.40 : 1;
		function advanceCarousel() {
			if (!_isAnimating && !_singlePhone) {
				_isAnimating = true;
				var $activePhoneModule = $phoneModules.filter('.active:first'),
					$activeDevice = $activePhoneModule.children('.images:first'),
					$lastDevice = $devices.last(),
					prevDeviceWidth = parseInt($lastDevice.css('width')),
					prevDeviceHeight = parseInt($lastDevice.css('height')),
					prevDeviceLeft = parseInt($lastDevice.css('right')),
					prevDeviceBottom = parseInt($lastDevice.css('bottom'));
				$devices.each(function(index) {
					var $device = $(this),
						$phoneModule = $device.parent('.image-module'),
						isActiveDevice = $device.parent('.image-module').hasClass('active'),
						deviceWidth = parseInt($device.css('width')),
						deviceHeight = parseInt($device.css('height')),
						deviceLeft = parseInt($device.css('right')),
						deviceBottom = parseInt($device.css('bottom')),
						deviceOpacity = isActiveDevice ? 0 : 1,
						zIndex = parseInt($phoneModule.css('z-index'));
					$phoneModule.css('z-index', zIndex + 1);
					if (isActiveDevice && _numPhoneModules < 3) {
						$device.hide();
					}
					else {
						$device.animate({
							'width' : isActiveDevice ? deviceWidth * 1.12 + 'px' : prevDeviceWidth + 'px',
							'height' : isActiveDevice ? deviceHeight * 1.12 + 'px' : prevDeviceHeight + 'px',
							'right' : isActiveDevice ? deviceLeft + 90 + 'px' : prevDeviceLeft + 'px',
							'bottom' : isActiveDevice ? deviceBottom - 90 + 'px' : prevDeviceBottom + 'px',
							'opacity' : isActiveDevice ? 0 : 1
						}, settings.carouselSpeed, 'linear', function() {
							oncomplete_animate(index);
						});
						
					}
					prevDeviceWidth = deviceWidth;
					prevDeviceHeight = deviceHeight;
					prevDeviceLeft = deviceLeft;
					prevDeviceBottom = deviceBottom;
				});
			}
			function oncomplete_animate(index) {
				if (index == _numPhoneModules - 1 || _numPhoneModules < 3) {
					var $dots = $carouselIndicator.children('li');
						$activeDot = $dots.filter('.active:first');
					_isAnimating = false;
					//$activeDevice.fadeOut(settings.fadeOutSpeed, function(){
						$activeDevice.css({
							'width' : _endWidth + 'px',
							'height' : _endHeight + 'px',
							'right' : _endLeft + 'px',
							'bottom' : _endBottom + 'px'
							//'opacity' : 1
						});
						$activePhoneModule
							.css('z-index', 1)
							.removeClass('active');
						$activeDevice.animate({
							'opacity' : 1
						}, settings.fadeInSpeed, 'linear');
					//});
					if (_showAllPhones) {
						$activeDevice.show();
					}
					
					if ($activePhoneModule.next().length == 0) {
						$phoneModules.first().addClass('active');
					}
					else {
						$activePhoneModule.next().addClass('active');	
					}
					$activeDot.removeClass('active');
					if ($activeDot.next().length == 0) {
						$dots.first().addClass('active');
					}
					else {
						$activeDot.next().addClass('active');	
					}
				}
			}
		}
		
		// We do not want the carousel move onclick event this time
		function onclick_carousel(e) {
			/*$(this).next().trigger("click");*/
			e.preventDefault();
			clearInterval(cycle);
			advanceCarousel();
			cycle = setInterval(advanceCarousel, settings.carouselTimeout);
		}
		
		// My Initial values for positioning
		var indicatorDots = '',
			zIndex = _numPhoneModules,
			deviceWidth = _startDeviceWidth,
			deviceHeight = _startDeviceHeight,
			deviceLeft = 0,
			deviceBottom = 0,
			scalePercent = 1,
			//scalePercent =.65,
			//scaleLeft = 60;
			scaleLeft = 50;
		$devices.each(function(index) {
			if (_numPhoneModules < 3) {
				$(this)
					.css({
						'width' : deviceWidth * scalePercent + 'px',
						'height' : deviceHeight * scalePercent + 'px',
						'right' : deviceLeft + 'px',
						'bottom' : deviceBottom + 'px',
						'display' : 'none'
					})
					.click(onclick_carousel) /* Uncomment if you want onclick event */
					.parent('.image-module')
						.css('z-index', zIndex);
			}
			else {
				$(this)
					.animate({
						'width' : deviceWidth * scalePercent + 'px',
						'height' : deviceHeight * scalePercent + 'px',
						'right' : deviceLeft + 'px',
						'bottom' : deviceBottom + 'px'
					}, settings.firstAnimationSpeed, 'linear')
					.click(onclick_carousel) /* Uncomment if you want onclick event */
					.parent('.image-module')
						.css('z-index', zIndex);
			}
			if(index == 0 || _showAllPhones) {
				$(this).show();
			}
			if(index == _numPhoneModules - 1) {
				_endWidth = parseInt(deviceWidth * scalePercent);
				_endHeight = parseInt(deviceHeight * scalePercent);
				_endLeft = deviceLeft;
				_endBottom = deviceBottom;
				_endScalePercent = scalePercent;
			}
			indicatorDots += '<li></li>';
			zIndex--;
			scalePercent -= 0.12;
			scaleLeft += 10;
			deviceLeft -= scaleLeft;
			deviceBottom += (30/_depthRatio);
		});
		$baseDevice.parent('.image-module').addClass('active');
		$carouselIndicator
			.html(indicatorDots)
			.children('li:first')
				.addClass('active');
		/* $carouselIndicator.click(onclick_carousel); Uncomment if you want onclick event */
		var cycle = setInterval(advanceCarousel, settings.carouselTimeout);
	}
	return self;
	
})(jQuery);

var settings = {
	imgWidth: 455,
	imgHeight: 280,
	carouselSpeed: 500,
	carouselTimeout: 2500,
	firstAnimationSpeed: 500,
	fadeOutSpeed: 1000,
	fadeInSpeed: 800
}

tu.depthCarousel.init($('#jlm-carousel'), settings);