jQuery(function() {

	gal = new dfGallery({});

	/**
	 * binding events
	 */
	jQuery(".thumbnail > a").click(gal.switchImage);
	jQuery("a.button-next").click(gal.nextImage);
	jQuery("a.button-previous").click(gal.previousImage);

	gal.setMainImageElement(jQuery(".main-image"));
	gal.setCurrentIndexElement(jQuery(".controls-current-index"));
	gal.setTotalCountElement(jQuery(".controls-total-count"));
	gal.setThumbs(jQuery(".additional-images .items a"));


	$('.button-zoom > a').click(function() {
		jQuery.blockUIX(
		{
			message: jQuery(".mod-vehicle-gallery-overlay-template").val().replace(/{{framesrc}}/g,jQuery(this).attr('href')),
			css: {
				border: 'none',
				width: '640px',
				height: '640px'
			},
			autoCenter: true
		}
		)
		return false;
	});

	var range = 13;
	var lastRange = 13;
	var first = true;

	var loading = function() {
		$(this).parent('a').removeClass('hidden').parent('.thumbnail').css('background-image', 'none');
	}

	var showImages = function(start, finish) {
		$('div.additional-images div.scrollable div.items div.thumbnail a').each(function(index){
			if(index >= start && index <= finish) {
				var data = $(this).html().match(/(.*)\|(.*)\|(.*)/);

				if(data) {
					var attrs = {
						src : $.trim(data[1].replace(/&amp;/g, '&')),
						title : $.trim(data[2]),
						alt : $.trim(data[2])
					}

					if($.trim(data[3])) {
						var size = data[3].split('x');
						attrs.width = size[0];
						attrs.height = size[1];
					}

					var img = $('<img>').bind('load', loading).attr(attrs);
					$(this).html('').append(img);
				}
			}
		});
	}

	showImages(7, 13);

	$('div.additional-images .prevPage').bind('click', function() {
		lastRange -= 6;
	});

	$('div.additional-images .nextPage').bind('click', function() {
		if(lastRange == range) {
			if(first) {				
				first = false;
			}
			showImages(range, range + 5);
			range += 6;
		}

		lastRange += 6;
	});

});