var isFadingA = false;
var isFadingB = false;
var fadeTime = 250;
var fadeAmount = 2;
var toggleFade = 1;

function resizeImageById(id)
{
    
}

function resizeImageByElem(elem) 
{

    elem.css('width', "");
    elem.css('height', "");  

    // get the width of the parent
    var parentHeight = elem.parent().height();
    var parentWidth = elem.parent().width();

    // get the width of the image
    var imageHeight = elem.height();
    var imageWidth = elem.width();

    if (imageWidth > imageHeight) 
	{		
		
        var aspectRatio = imageWidth / imageHeight;

        var diff = imageWidth / parentWidth;

        imageWidth = parentWidth;
        imageHeight = imageHeight / diff;

		// alert("width: " + imageWidth + ", " + "height: " + imageHeight);
		
		if (imageHeight > parentHeight)
		{		
			var diff = imageHeight / parentHeight;
			
			imageWidth  = imageWidth / diff;
			imageHeight = parentHeight;			
			
		}
	
    }
    else 
	{
	
        var aspectRatio = imageHeight / imageWidth;
		
        var diff = imageHeight / parentHeight;
        
        imageWidth = imageWidth / diff;
        imageHeight = parentHeight;
		
    }
      
    //and change the margin-top css attribute of the image
    elem.css('width', imageWidth);
    elem.css('height', imageHeight);    

}

function centerImageById(id) 
{

    var elemBigImage = $(id);

    // Get the .big-image siblings
    var sibs = elemBigImage.siblings();

    //
    var elemA = $(sibs[0]);

	// 
    centerImageByElem(elemA);
}

function centerImageByElem(elem) {

    //get the width of the parent
    var parentHeight = elem.parent().height();
    var parentWidth = elem.parent().width();
    
    //get the width of the image
    var imageHeight = elem.height();
    var imageWidth = elem.width();

    //calculate how far from top the image should be
    var leftMargin = (parentWidth - imageWidth) / 2;
    var topMargin = (parentHeight - imageHeight) / 2;

    //and change the margin-top css attribute of the image
    elem.css('margin-top', topMargin);
    elem.css('margin-left', leftMargin);

}

function showImage(elem) 
{

	if (isFadingA == true || isFadingB == true)
		return;

	isFadingA = true;
	isFadingB = true;

	var elemBigImage = $("#gallery-main .big-image img");

	// Get the .big-image siblings
	var sibs = elemBigImage.siblings();

	// Toggle for fade-between
	if (toggleFade == 0) 
	{
		var elemA = $(sibs[0]);
		var elemB = $(sibs[1]);
		toggleFade = 1;
	} 
	else 
	{
		var elemA = $(sibs[1]);
		var elemB = $(sibs[0]);
		toggleFade = 0;
	}

	elemA.attr("src", elem.attr("src"));
	// resizeImageByElem(elemA);
	// centerImageByElem(elemA);

	elemA.animate({ 'opacity': 1.0 }, fadeTime, function () {
		isFadingA = false;
	});

	elemB.animate({ 'opacity': 0.0 }, fadeTime, function () {
		isFadingB = false;
	});	
	
}

$(document).ready(function () 
{

    $("#gallery-main .thumbnails .gallery-list li img").click(function () 
	{
	
		$("#gallery-main .thumbnails ul li").css({ "background": "#ffffff url(/images/gallery-img-bg.png)" });
		$(this).parent().css({ "background": "#ffffff url(/images/gallery-img-bg-selected.png)" });
		
		showImage($(this));

    });

    // Sort out dynamic width for thumbnail holder *
    $(function () {

        var elemThumbs = $('#gallery-main .thumbnails ul li ');
        var elemThumbsUL = $('#gallery-main .thumbnails .gallery-list');
        var elemBigImage = $("#gallery-main .big-image img");

        var numThumbs = elemThumbs.siblings().length;

        // 
        var sibs = elemThumbs.siblings();
        var firstThumb = $(sibs[0]);

        var width = $(firstThumb).width() * parseFloat(numThumbs);
        elemThumbsUL.css({ "width": width + "px" });

        firstThumb.css({ "background": "#ffffff url(/images/gallery-img-bg-selected.png)" });
	
		// 
		showImage($('#gallery-main .thumbnails .gallery-list li img'));

        //
        //elemBigImage.attr("src", $(elemThumbs.siblings()[0]).attr("src"));
		
        // 
        // centerImageById("#gallery-main .big-image img");

    });
    //*/    

});