//Detail page, image gallery
var Razsor = Razsor || {};

jQuery.fn.setupAdvertCarousels = function(options) {
	var targetComponent = this;
	var showControls = true;
	var enlargeImageOnClick = options.enlargeImageOnClick;
	if (targetComponent.length === 0) {
		return;
	}

	if (targetComponent.find('.image').hasClass("carouselActive")) {
		return;
	}

	targetComponent.find('.image').addClass("carouselActive");

	targetComponent.find('.image').each(function() {
		if (targetComponent.find('.image .navs li').length === 1) {
			targetComponent.find('.image .navs').css({
			    position : 'absolute',
			    top : '-999em',
			    left : '-999em'
			});
			showControls = false;
		}
	});

	targetComponent
	        .find('.image')
	        .append(
	                '<ul class="leftright"><li class="left"><a href="#">left</a></li><li class="right"><a href="#">right</a></li></ul><ul class="links"></ul>');

	i = 0;
	targetComponent.find('.image .navs li').each(
	        function() {
		        imageURL = $(this).find('a').attr('href');
		        targetComponent.find('.image ul.links').append(
		                '<li><a href="' + imageURL + '" rel="slideshow">' + i
		                        + '</a></li>');
		        i++;
	        });

	targetComponent.find('.image .item img, .image .item span').click(
	        function() {
		        var itemID = $(this).attr('id').split('-').pop();
		        targetComponent.find('.image ul.links li:eq(' + itemID + ') a')
		                .click();
	        });

	// move last item to start
	lastItem = targetComponent.find('.image .navs li:last-child').html();
	lastItem = '<li>' + lastItem + '</li>';
	targetComponent.find('.image .navs ul').prepend(lastItem);
	targetComponent.find('.image .navs ul li:last-child').remove();

	// Compute slide width for horizontal scroller
	var firstLi = targetComponent.find('.image .navs li:first-child');
	var slideWidth = $(firstLi, 'img').outerWidth()
	        + parseInt($(firstLi).css('margin-right'), 10);
	var slideControlOffset = {
		left : '-' + slideWidth + 'px'
	};

	// highlight current selection
	targetComponent.find('.image .navs li:eq(1)').addClass('on');

	targetComponent
	        .find('.image .navs li')
	        .live(
	                'click',
	                function(event) {
		                event.preventDefault();
		                // don't do anything if it's currently animating
		                if (!$('body').hasClass('animating')) {
			                if (!$(this).hasClass('on')) {
				                $('body').addClass('animating');
			                }
			                clickedItem = $('.navs li').index(this);

			                if (clickedItem === '2') {
				                lastItem = '<li>'
				                        + targetComponent.find(
				                                '.image .navs li:eq(0)').html()
				                        + '</li>';// store the first item as
				                // html, so it can be moved
				                // to last place
				                // move it down 1 position

				                targetComponent.find('.image .navs ul').append(
				                        lastItem);// add the old first item to
				                // the end
				                targetComponent
				                        .find('.image .navs ul')
				                        .animate(
				                                slideControlOffset,
				                                'slow',
				                                function() {
					                                targetComponent
					                                        .find(
					                                                '.image .navs li:first-child')
					                                        .remove();// remove
					                                // the
					                                // old
					                                // first
					                                // item
					                                targetComponent.find(
					                                        '.image .navs ul')
					                                        .css({
						                                        left : '0'
					                                        });//
					                                // allow click function
					                                // again
					                                $('body').removeClass(
					                                        'animating');
				                                });
			                } else if (clickedItem === '0') {
				                lastItem = '<li>'
				                        + targetComponent
				                                .find(
				                                        '.image .navs ul li:last-child')
				                                .html() + '</li>';
				                targetComponent
				                        .find('.image .navs ul')
				                        .prepend(lastItem)
				                        .css(slideControlOffset)
				                        .animate(
				                                {
					                                left : '0'
				                                },
				                                'slow',
				                                function() {
					                                targetComponent
					                                        .find(
					                                                '.image .navs ul li:last-child')
					                                        .remove();
					                                $('body').removeClass(
					                                        'animating');
				                                });
			                }

			                targetComponent.find('.image .navs li')
			                        .removeClass('on');

			                replaceMainImage($(this), '.image .item img');

			                itemID = $(this).find('a').attr('id').split('-')
			                        .pop();
			                spanID = 'span-' + itemID;
			                itemID = 'item-' + itemID;
			                targetComponent.find('.image .item img').attr('id',
			                        itemID);
			                targetComponent.find('.image .item span').attr(
			                        'id', spanID);
			                $(this).addClass('on');
			                $('body').removeClass('animating');
		                }
		                return false;
	                });

	targetComponent
	        .find('.image ul.leftright li.right a')
	        .live(
	                'click',
	                function() {
		                // don't do anything if it's currently animating
		                if (!$('body').hasClass('animating')) {
			                // get html from last item
			                lastItem = targetComponent.find(
			                        '.image .navs ul li:first-child').html();
			                lastItem = '<li>' + lastItem + '</li>';
			                $('body').addClass('animating');
			                targetComponent
			                        .find('.image .navs ul')
			                        .append(lastItem)
			                        .animate(
			                                slideControlOffset,
			                                'normal',
			                                function() {
				                                targetComponent
				                                        .find(
				                                                '.image .navs ul li:first-child')
				                                        .remove();
				                                targetComponent.find(
				                                        '.image .navs ul').css(
				                                        {
					                                        left : '0'
				                                        });
				                                $('body').removeClass(
				                                        'animating');
			                                });
			                targetComponent.find('.image .navs ul li').each(
			                        function(i) {
				                        if ($(this).hasClass('on')) {
					                        totalItems = targetComponent.find(
					                                '.image .navs ul li')
					                                .size();
					                        totalItems = totalItems - 1;
					                        selectedItem = $(this).find('a')
					                                .attr('id').split('-')
					                                .pop();
					                        selectedItem = parseInt(
					                                selectedItem, 10);
					                        selectedItem = selectedItem + 1;
					                        if (selectedItem === totalItems) {
						                        selectedItem = 0;
					                        }
				                        }
			                        });
			                replaceMainImage(
			                        targetComponent.find('.image .navs a#nav-'
			                                + selectedItem), '.image .item img');
			                itemID = 'item-' + selectedItem;
			                spanID = 'span-' + selectedItem;
			                targetComponent.find('.image .item img').attr('id',
			                        itemID);
			                targetComponent.find('.image .item span').attr(
			                        'id', spanID);
			                targetComponent.find('.image .navs ul li')
			                        .removeClass('on');
			                // TOM EDIT targetComponent.find('.image .navs ul
			                // li:eq(1)').addClass('on');
			                targetComponent.find('.image .navs ul li:eq(2)')
			                        .addClass('on');
		                }
		                return false;
	                });

	targetComponent
	        .find('.image ul.leftright li.left a')
	        .live(
	                'click',
	                function() {
		                // don't do anything if it's currently animating
		                if (!$('body').hasClass('animating')) {
			                // get html from last item
			                lastItem = targetComponent.find(
			                        '.image .navs ul li:last-child').html();
			                lastItem = '<li>' + lastItem + '</li>';
			                $('body').addClass('animating');
			                targetComponent
			                        .find('.image .navs ul')
			                        .prepend(lastItem)
			                        .css(slideControlOffset)
			                        .animate(
			                                {
				                                left : '0'
			                                },
			                                'normal',
			                                function() {
				                                targetComponent
				                                        .find(
				                                                '.image .navs ul li:last-child')
				                                        .remove();
				                                $('body').removeClass(
				                                        'animating');
			                                });
			                targetComponent
			                        .find('.image .navs ul li')
			                        .each(
			                                function(i) {
				                                if ($(this).hasClass('on')) {
					                                totalItems = targetComponent
					                                        .find(
					                                                '.image .navs ul li')
					                                        .size();
					                                selectedItem = $(this)
					                                        .find('a').attr(
					                                                'id')
					                                        .split('-').pop();
					                                selectedItem = parseInt(
					                                        selectedItem, 10);
					                                selectedItem = selectedItem - 1;
					                                if (selectedItem < 0) {
						                                selectedItem = totalItems;
						                                selectedItem = selectedItem - 2;
					                                }
				                                }
			                                });
			                replaceMainImage(
			                        targetComponent.find('.image .navs a#nav-'
			                                + selectedItem), '.image .item img');
			                itemID = 'item-' + selectedItem;
			                spanID = 'span-' + selectedItem;
			                targetComponent.find('.image .item img').attr('id',
			                        itemID);
			                targetComponent.find('.image .item span').attr(
			                        'id', spanID);
			                targetComponent.find('.image .navs ul li')
			                        .removeClass('on');
			                targetComponent.find('.image .navs ul li:eq(1)')
			                        .addClass('on');
		                }
		                return false;
	                });

	if (enlargeImageOnClick) {
		Razsor.setUpColorbox(targetComponent.find('.image ul.links a'));
	}

	if (!showControls) {
		$('.leftright').hide();
	}

	/*
	 * -------------------------------------------------------------------------------------------------------------------------------- --
	 * Initalise
	 * --------------------------------------------------------------------------------------------------------------------------------
	 */
	var showControls_v = true;

	if (targetComponent.find('.image_v').hasClass("carouselActive")) {
		return;
	}

	targetComponent.find('.image_v').addClass("carouselActive");

	if (targetComponent.find('.image_v .navs li').length === 1) {
		showControls_v = false;
	}

	targetComponent
	        .find('.image_v')
	        .append(
	                '<ul class="leftright"><li class="left"><a href="#">left</a></li><li class="right"><a href="#">right</a></li></ul><ul class="links"></ul>');

	if (!showControls_v) {
		targetComponent.find('.image_v .navs').css({
		    position : 'absolute',
		    top : '-999em',
		    left : '-999em'
		});
		targetComponent.find('.leftright').css({
		    position : 'absolute',
		    top : '-999em',
		    left : '-999em'
		});
	}

	i = 0;
	targetComponent.find('.image_v .navs li').each(
	        function() {
		        imageURL = jQuery(this).find('a').attr('href');
		        targetComponent.find('.image_v ul.links').append(
		                '<li><a href="' + imageURL + '" rel="slideshow">' + i
		                        + '</a></li>');
		        i++;
	        });

	targetComponent.find('.image_v .item img, .image_v .item span').click(
	        function() {
		        var itemID = jQuery(this).attr('id').split('-').pop();
		        targetComponent.find(
		                '.image_v ul.links li:eq(' + itemID + ') a').click();
	        });

	// move last item to start
	lastItem = targetComponent.find('.image_v .navs li:last-child').html();
	lastItem = '<li>' + lastItem + '</li>';
	targetComponent.find('.image_v .navs ul').prepend(lastItem);
	targetComponent.find('.image_v .navs ul li:last-child').remove();

	// highlight current selection
	targetComponent.find('.image_v .navs li:eq(1)').addClass('on');

	targetComponent.find('.image_v .navs ul li:eq(1)').live('click',
	        function() {
		        return false;
	        });

	// Compute slide depth
	firstLi = targetComponent.find('.image_v .navs li:first-child');
	var slideAmount = $(firstLi, 'img').outerHeight();
	var slideDepth = {
		top : '-' + slideAmount + 'px'
	};

	/*
	 * -------------------------------------------------------------------------------------------------------------------------------- --
	 * bottom button clicked
	 * --------------------------------------------------------------------------------------------------------------------------------
	 */

	targetComponent
	        .find(
	                '.image_v .navs ul li:eq(2), .image_v ul.leftright li.right a')
	        .live(
	                'click',
	                function(event) {
		                event.preventDefault();
		                if (!jQuery('body').hasClass('animating')) {
			                jQuery('body').addClass('animating');
			                var totalItems = targetComponent.find(
			                        '.image_v .navs ul li').size();
			                topCarouselItemSnippet = '<li>'
			                        + targetComponent.find(
			                                '.image_v .navs ul li:first-child')
			                                .html() + '</li>';

			                selectedItemElement = $('.on');

			                selectedIndex = selectedItemElement.find('a').attr(
			                        'id').split('-').pop();
			                selectedIndex = parseInt(selectedIndex, 10) + 1;
			                if (selectedIndex === totalItems) {
				                selectedIndex = 0;
			                }

			                targetComponent
			                        .find('.image_v .navs ul')
			                        .append(topCarouselItemSnippet)
			                        .animate(
			                                slideDepth,
			                                'normal',
			                                function() {
				                                targetComponent
				                                        .find(
				                                                '.image_v .navs ul li:first-child')
				                                        .remove();
				                                targetComponent.find(
				                                        '.image_v .navs ul')
				                                        .css({
					                                        top : '0'
				                                        });
				                                jQuery('body').removeClass(
				                                        'animating');
			                                });

			                replaceMainImage(targetComponent
			                        .find('.image_v .navs a#nav-'
			                                + selectedIndex),
			                        '.image_v .item img');

			                itemID = 'item-' + selectedIndex;
			                spanID = 'span-' + selectedIndex;
			                targetComponent.find('.image_v .item img').attr(
			                        'id', itemID);
			                targetComponent.find('.image_v .item span').attr(
			                        'id', spanID);
			                selectedItemElement.removeClass('on');
			                selectedItemElement.next().addClass('on');
		                }
		                return false;
	                });

	/*
	 * -------------------------------------------------------------------------------------------------------------------------------- --
	 * top button clicked
	 * --------------------------------------------------------------------------------------------------------------------------------
	 */
	targetComponent
	        .find('.image_v .navs ul li:eq(0), .image_v ul.leftright li.left a')
	        .live(
	                'click',
	                function(event) {
		                event.preventDefault();
		                if (!jQuery('body').hasClass('animating')) {
			                jQuery('body').addClass('animating');
			                var totalItems = targetComponent.find(
			                        '.image_v .navs ul li').size();
			                bottomCarouselItemSnippet = '<li>'
			                        + targetComponent.find(
			                                '.image_v .navs ul li:last-child')
			                                .html() + '</li>';

			                selectedItemElement = $('.on');

			                selectedIndex = selectedItemElement.find('a').attr(
			                        'id').split('-').pop();
			                selectedIndex = parseInt(selectedIndex, 10) - 1;
			                if (selectedIndex < 0) {
				                selectedIndex = totalItems - 1;
			                }

			                targetComponent
			                        .find('.image_v .navs ul')
			                        .prepend(bottomCarouselItemSnippet)
			                        .css(slideDepth)
			                        .animate(
			                                {
				                                top : '0'
			                                },
			                                'normal',
			                                function() {
				                                targetComponent
				                                        .find(
				                                                '.image_v .navs ul li:last-child')
				                                        .remove();
				                                jQuery('body').removeClass(
				                                        'animating');
			                                });

			                replaceMainImage(targetComponent
			                        .find('.image_v .navs a#nav-'
			                                + selectedIndex),
			                        '.image_v .item img');
			                itemID = 'item-' + selectedIndex;
			                spanID = 'span-' + selectedIndex;
			                targetComponent.find('.image_v .item img').attr(
			                        'id', itemID);
			                targetComponent.find('.image_v .item span').attr(
			                        'id', spanID);
			                selectedItemElement.removeClass('on');
			                selectedItemElement.prev().addClass('on');
		                }
		                return false;
	                });

	/*
	 * -------------------------------------------------------------------------------------------------------------------------------- --
	 * Image clicked for enlarged view
	 * --------------------------------------------------------------------------------------------------------------------------------
	 */

	if (enlargeImageOnClick) {
		Razsor.setUpColorbox(targetComponent.find('.image_v ul.links a'));
	}

	function replaceMainImage(containingLi, currentMainImageSelector) {
		var currentMainImage$ = targetComponent.find(currentMainImageSelector);
		var re = new RegExp(/\-[0-9]+x[0-9]+\.jpg/);
		var currentLargeImageSrc = currentMainImage$.attr('src');

		var largeImageSize = re.exec(currentLargeImageSrc);
		var itemFileName = containingLi.find('img').attr('src').replace(
		        /\-[0-9]+x[0-9]+\.jpg/, largeImageSize[0]);
		targetComponent.find(currentMainImageSelector)
		        .attr('src', itemFileName);
	}

};

Razsor.setupShowcaseVehicleImageDialog = function() {
	var $showCaseVehicleComponent = $('#showcaseVehicleComponent');
	Razsor.setUpColorbox($showCaseVehicleComponent.find('.imageLinks li a'));
	$showCaseVehicleComponent.find('.images a').click(
	        function(event) {
		        event.preventDefault();
		        var selectedIndexInCarousel = 0;
		        var $carouselMainImage = $showCaseVehicleComponent
		                .find('div.item  img');
		        if ($carouselMainImage.size() !== 0) {
			        selectedIndexInCarousel = $carouselMainImage.attr('id')
			                .split('-').pop();
		        }
		        $showCaseVehicleComponent.find(
		                '.imageLinks li a:eq(' + selectedIndexInCarousel + ')')
		                .click();
	        });
};

Razsor.setupDetailImageDialog = function() {
	var $advertDetailComponent = $('#advertDetailComponent');
	Razsor.setUpColorbox($advertDetailComponent.find('[rel="slideshow"]'));
	$advertDetailComponent.find('.images a').click(
	        function(event) {
		        event.preventDefault();
		        var selectedIndexInCarousel = $('div.item > img').attr('id')
		                .split('-').pop();
		        $('[rel="slideshow"]:eq(' + selectedIndexInCarousel + ')')
		                .click();
	        });
};

Razsor.setUpColorbox = function(jQueryComponent) {
	jQueryComponent.colorbox({
	    overlayClose : false,
	    innerWidth : 640,
	    innerHeight : 480,
	    open : false,
	    onLoad : function() {
	        razsor.commonfunctions.CommonFunctions.setClassToColorbox('enlarge-popup');
	    }
	});
};
$(document).ready(function() {
	$('.rzc-advert').setupAdvertCarousels({
		enlargeImageOnClick : true
	});
	Razsor.setupDetailImageDialog();

	$('.rzc-showcase-vehicle').setupAdvertCarousels({
		enlargeImageOnClick : false
	});
	Razsor.setupShowcaseVehicleImageDialog();
});