$(document).ready(function(){
	buildGallery();
});
function buildGallery() {
	var gContainer = $('.gallery');
	var gAutoWidth = $(gContainer).hasClass("autowidth");
	var gUpSlide = $(gContainer).hasClass("upslide");
	var gFadeTime = 300;
	var gFadeType = 'linear';
	var gTitle = $(gContainer).children(':first:not(ul)').addClass('g-title');
	var gList = $(gContainer).find('ul');
	var gProjector = $('<div>').addClass('g-projector').addClass('loading').insertBefore(gList);
	var gMask = $('<div>').addClass('g-mask').append(gList);
	var gSlider = (gUpSlide) ? $('<div>').addClass('g-slider').insertBefore(gProjector).append(gMask) : $('<div>').addClass('g-slider').insertAfter(gProjector).append(gMask);
	var gArrowL = $('<a>').addClass('g-arrowl').attr('href','#').insertBefore(gMask);
	var gArrowR = $('<a>').addClass('g-arrowr').attr('href','#').insertAfter(gMask);
	var gLink = $(gList).find('li a');

	var gNumImage = $(gLink).size();
	
	var gCssArrow = $(gArrowL).outerWidth(true);
	var gCssThumb = $(gLink).eq(0).parent().outerWidth(true);
	var gCssThumbMargin = gCssThumb-$(gLink).eq(0).parent().outerWidth();
	var gCssList = gNumImage*gCssThumb;
	var gCurrentStep = 0;
	
	var gCssWidth;
	var gCssMask;
	var gNumImageStep;
	var gMaxStep;
	var gWidthStep;
	
	var imgWidth;
	var imgHeight;

	init();
	
	function init() {

		//$(gList).width(gCssList);
		
		doTransition();
		buildLink();
		//buildArrows();
		showImage(0);
		//if (gNumImage<=1) $(gSlider).remove();
	}
	
	function buildVariables(galleryWidth) {
		/*
		gNumImageStep = Math.ceil((galleryWidth-2*gCssArrow+gCssThumbMargin)/gCssThumb);
		gCssWidth = gNumImageStep*gCssThumb+2*gCssArrow-gCssThumbMargin;
		gCssMask = Number(gCssWidth-2*gCssArrow);
		gMaxStep = Math.ceil(gNumImage/gNumImageStep)-1;
		gWidthStep = gCssThumb*gNumImageStep;
		*/
		gCssMask = 100;
		gCssWidth = galleryWidth+gCssMask+6;

	}
	
	function moveImages() {
		$(gList).animate({
			left: -(gCurrentStep*gWidthStep)
		}, 500 );
	}
	
	function getListWidth(list) {
		var gLinkWidth = 0;
		$(list).each(function() {
			gLinkWidth += $(this).parent().outerWidth(true);
		});
		return gLinkWidth;
	}
	
	function buildArrows() {
		$(gArrowL).click(function() {
			if (gCurrentStep>0) {
				gCurrentStep--;
				moveImages();
			}
			return false;
		});
		$(gArrowR).click(function() {
			if (gCurrentStep<gMaxStep) {
				gCurrentStep++;
				moveImages();
			}
			return false;
		});
	}
	
	function buildLink() {
		$(gLink).click(function() {
			$(gProjector).empty().addClass('loading');
			showImage($(gLink).index(this));
			return false;
		});
	}
	
	function showImage(index) {
		var imageUrl = $(gLink).eq(index).attr('href');
		var imageExt = imageUrl.toLowerCase().split(".").pop();
		
		if(imageExt=="flv") {
			var gVideoplayer = $('<div>').attr('id','g-videoplayer').appendTo(gProjector);
			imgWidth = 400;
			imgHeight = 300;
			
			doTransition();
			$(gProjector).animate({
				height: imgHeight
				}, gFadeTime, gFadeType, function() {
						$(this).removeClass('loading');
						
						var flashvars = {};
							flashvars.videofile = imageUrl;
						var params = {};
							params.base = '/swfs/';
						var attributes = {};
						swfobject.embedSWF('/swfs/videoplayer.swf', 'g-videoplayer', imgWidth, imgHeight, '9.0.0','/swfs/expressInstall.swf', flashvars, params, attributes);
					}
			);
		
		}else{
			var img = new Image();
					
			$(img).load(function () {
				$(this).hide();
				$(gProjector).append(this);
				imgHeight = $(this).innerHeight();
				imgWidth = $(this).innerWidth();
				doTransition();
				$(gProjector).animate({
					height: imgHeight
					}, gFadeTime, gFadeType, function() {
							$(img).fadeIn();
							$(this).removeClass('loading');
						}
				);
			}).error(function () {
				trace('error');
			}).attr('src', imageUrl);
		}
	}
	
	function doTransition() {
		
		
		/*var newWidth = gAutoWidth && !isNaN(imgWidth) ? imgWidth : $(gContainer).width();*/
		var newWidth = gAutoWidth && !isNaN(imgWidth) ? imgWidth : $(gProjector).width();
		
		buildVariables(newWidth);
		
		$(gMask).animate({
			width: gCssMask
			}, gFadeTime, gFadeType
		);
		$(gContainer).animate({
			width: gCssWidth
			}, gFadeTime, gFadeType
		);
		$(gProjector).animate({
			width: newWidth
			}, gFadeTime, gFadeType
		);

	}
	
}