var gallerySlideWidth, galleryStep, gallerySlide, galleryText, selectedImage;

$('#content-right').ready(function () {

	$('#content-right').pngFix();

	gallerySlideWidth = $('#g-nav-inner ul .image:last').position().left + $('#g-nav-inner ul .image:last').outerWidth();
	galleryStep = $('#g-nav-inner').outerWidth();
	gallerySlide = $('#g-nav-inner .long');
	galleryText = true;
	
	function checkArrows() {
		if (gallerySlide.position().left + gallerySlideWidth <= $('#g-nav-inner').width()) {
			$('#g-arrow-right').removeClass('active');
			$('#g-arrow-right').addClass('hidden');
		} else {
			$('#g-arrow-right').removeClass('hidden');
		}
		if (gallerySlide.position().left >= 0) {
			$('#g-arrow-left').removeClass('active');
			$('#g-arrow-left').addClass('hidden');
		} else {
			$('#g-arrow-left').removeClass('hidden');
		}
	}
    
	$('#g-arrow-right').click(function(e) {
        if (gallerySlide.position().left + gallerySlideWidth > $('#g-nav-inner').width()) {
            if (!gallerySlide.queue().length) {
				gallerySlide.animate({left: '-=' + galleryStep}, 1000, checkArrows);
			}
        }
	}).mouseover(function(e) {
        if (gallerySlide.position().left + gallerySlideWidth > $('#g-nav-inner').width())
            $(this).addClass('active');
	}).mouseout(function(e) {
        $(this).removeClass('active');
	});
    
    $('#g-arrow-left').click(function(e) {
        if (gallerySlide.position().left < 0) {
            if (!gallerySlide.queue().length) {
				gallerySlide.animate({left: '+=' + galleryStep}, 1000, checkArrows);
			}
        }
	}).mouseover(function(e) {
        if (gallerySlide.position().left < 0)
            $(this).addClass('active');
	}).mouseout(function(e) {
        $(this).removeClass('active');
	});
    
    $('#g-nav-inner li .image').each(function(idx) {
        this._initial = {
			width 	: $(this).width(),
			height	: $(this).height(),
			top		: $(this).position().top,
			left	: $(this).position().left
		};
		
		$(this).css({
			position: 'absolute',
			top		: this._initial.top,
			left	: this._initial.left
		});
		
		preloadImage($(this).getImageSrc().replace(/-\d+\.png$/, '-' + IMAGE_SIZE_LARGE + '.png'));
		
		$(this).click(function(e) {

			if (galleryText) {
				$('#g-text').hide();
				$('#g-viewport').show();
				galleryText = false;
			}
		
			if (this.selected) return;
		
			if (selectedImage) {
				$('#g-selected').remove();
				if ($.browser.msie && parseInt($.browser.version) < 7)
					$(selectedImage).show();
				else
					$(selectedImage).fadeIn(500);
				
				selectedImage.selected = 0;
			}
			
			var self = $(this), timerId, elapsed, bigSrc = $(this).getImageSrc().replace(/-\d+\.png$/, '-' + IMAGE_SIZE_LARGE + '.png');
			
			var show = function() {

				if (!self.get(0).selected) return;

				$('#g-viewport').html(
					$('<img/>').attr('id', 'g-selected').css({
						top : self.offset().top - $('#content-right').offset().top - $('#g-viewport').position().top - parseInt($('#g-viewport').css('marginTop')),
						left : self.offset().left - $('#content-right').offset().left - $('#g-viewport').position().left - parseInt($('#g-viewport').css('marginLeft')),
						width : self.width(),
						height : self.height()
					}).attr('src', bigSrc)
				).pngFix();
				$('#g-selected').animate({
					top : 0,
					left : 0,
					width : IMAGE_SIZE_LARGE,
					height : IMAGE_SIZE_LARGE
				}, 500);
				self.hide();
			};

			if (!preloadedImages[bigSrc].complete)
				setTimeout(function() {$('#g-viewport').append('<div class="loader"><div></div></div>')}, 10);
			
			elapsed = 0;
			timerId = setInterval(function() {
				if (preloadedImages[bigSrc].complete) {
					clearInterval(timerId);
					show();
				}
				elapsed += 50;
				if (elapsed > 30000) {
					clearInterval(timerId);
					$('#g-viewport .loader').remove();
				}
			}, 50);

			selectedImage = this;
			this.selected = 1;
			
			if (self.position().left + self.outerWidth() < gallerySlideWidth && idx % 5 == 4) {
				if (!gallerySlide.queue().length) {
					gallerySlide.animate({left: '-=' + galleryStep}, 1000, checkArrows);
				}
			}
		});
    });
});