var IMG_ID = 'img';
var DIV_ID = 'div';
	
var NUM_IN_GALLERY=30;
var currPage=1;
var currentImage;
var currentPos=248;
var initialPos=0;
var stopPos=currentPos;
var scrollSpeed=1;
var imageid = 1;

var thumbs       = new Array();
var images       = new Array();
var fullimages   = new Array();
var bwimages     = new Array();
var bwfullimages = new Array();

var startScroll; 
var selectThumb; 
var fastStart; 
var fastEnd;
var numToMove;

var beforeAutoScroll=0;
var hoveringOnButton=false;
var hoverId=0;
var autoLeftId=0;
var autoRightId=0;
var centrePosition=0;
var backToCentre=false;
var overButton = false;
var overImage = false;
var overImageDiv = false;
var overControl = false;

var image;
var gallery;
var selectedImage;
var bw;
var loaded = false;
var totalImages;


function setGallery(_gallery, _selectedImage)
{
	gallery = _gallery;
	selectedImage = _selectedImage;
}

function loadImage(tag, normal, hot, large, full, width, height, code, title, location, gallery_item, bw, bwfull, bwtitle)
{ 
	var thumb = new Image;
	thumb.tag = tag;
	$(thumb).load(function(){
		thumbs[this.tag] = this;
	});
	thumb.src = normal;
	
	var thumbhot = new Image;
	thumbhot.tag = tag;
	$(thumbhot).load(function(){
		thumbs[this.tag+"_hot"] = this;
	});
	thumbhot.src = hot;
	
	var bwimg = new Image;
	bwimg.tag = tag;
	$(bwimg).load(function(){
		bwimages[this.tag] = this;
		bwimages.length++;
	});
	bwimg.src    = bwfull;
	bwimg.width  = width;
	bwimg.height = height;
	bwimg.code = "BW_"+code;
	bwimg.title = bwtitle;
	bwimg.location = location;
	bwimg.gallery_item = gallery_item;
	
	var img = new Image;
	img.tag = tag;
	$(img).load(function(){
		images[this.tag] = this;
		images.length++;
		if ((images.length == totalImages || images.length == 10) && !loaded)
		{
			loaded = true;
			currentImage = $(".selectedImage img").get(0);//document.getElementById(IMG_ID+1);
			centreClickedThumb(IMG_ID+selectedImage)
			image                = $("#largeImage");
			image.load(function(){fadeImage();});
			image.css("width", images[currentImage.id].width);
			image.css("height", images[currentImage.id].height);
			image.attr("src", images[currentImage.id].src);
		
			image.attr("title", images[currentImage.id].title);;
			image.attr("location", images[currentImage.id].location);;
		
			var thumb = document.getElementById(currentImage.id);
			$("#image_title").html(image.attr("title"));
			$("#image_loc").html(image.attr("location"));
			var anchor = $("#enlarge");
		
			anchor.attr("href", images[currentImage.id].src);
			anchor.attr("title", images[currentImage.id].title);
			var showBW = $("#showBW");
			showBW.click(function(){showBWImage(currentImage.id);});
			if (bwimages[currentImage.id] != null)
				showBW.show();
			else
				showBW.hide();
//				showBW.href = 'javascript:setLargeImage("'+currentImage.id+'");';
			
			if (loadRemainingImages)
				loadRemainingImages();
		}
	});
	img.src    = full;
	img.width  = width;
	img.height = height;
	img.code = code;
	img.title = title;
	img.location = location;
	img.gallery_item = gallery_item;
}

$(document).ready(function(){

	
	$("#enlarge").click(function(e){
		e.preventDefault();
		var el = $("#border", this);
		var borderClone;
		el.expose({
			color: "#111",
			onBeforeLoad: function(){
				var offset = el.offset();
				var fancy = parseInt(el.attr("fancy"));
				var matboard = parseInt(el.attr("matboard"));
				var horzPadding = parseInt(el.css("paddingLeft"))+parseInt(el.css("paddingRight"));
				var vertPadding = parseInt(el.css("paddingTop"))+parseInt(el.css("paddingBottom"));
				el.css("position", "fixed").css("left", offset.left).css("top", offset.top-$(window).scrollTop()/*-parseInt(el.css("marginTop"))*/);
				borderClone = el.clone().hide().appendTo(el.parent());
				var borderWidth = el.width()+horzPadding;
				var borderHeight = el.height()+vertPadding;
				var viewportWidth = $(window).width();
				var viewportHeight = $(window).height();
				
				var image = $("#largeImage");
				var imgRatio = image.height()/image.width();
				var ratio = borderHeight/borderWidth;
				var maxWidth = viewportWidth*0.9;
				var maxHeight = viewportHeight*0.9;

				var dims;
				if (fancy)
				{
					dims = calcImageBorderDims(maxWidth, maxHeight, ratio, imgRatio);
					dims['imarginTop'] = 0;
					dims['imarginLeft'] = 0;
				}
				else if (matboard)
				{
					dims = calcImageMatBoardDims(maxWidth, maxHeight, ratio, imgRatio);
					dims['imarginTop'] = 0;
					dims['imarginLeft'] = 0;
				}
				else
				{
					dims = new Array();
					dims['width'] = maxWidth;
					dims['height'] = maxWidth*ratio;
					if (dims['height'] > maxHeight)
					{
						dims['height'] = maxHeight;
						dims['width'] = maxHeight/ratio;
					}
					dims['imgWidth'] = dims['width'];
					dims['imgHeight'] = dims['imgWidth']*imgRatio;
					if (dims['imgHeight'] < dims['height'])
					{
						dims['imgHeight'] = dims['height'];
						dims['imgWidth'] = dims['imgHeight']/imgRatio;
					}
					dims['marginTop'] = 0;
					dims['marginLeft'] = 0;
					dims['marginRight'] = 0;
					dims['imarginTop'] = (dims['height']-dims['imgHeight'])/2;
					dims['imarginLeft'] = (dims['width']-dims['imgWidth'])/2;
				}

				var newLeft = (viewportWidth-dims['width'])/2;
				var newTop = (viewportHeight-dims['height'])/2;
				
				var title = $("#border_title");
				var location = $("#border_loc");
				var sig = $("#border_sig");
				el.animate({left:newLeft, top: newTop, width: dims['imgWidth'], height: dims['height']-dims['marginTop'], paddingTop: dims['marginTop'], paddingLeft: dims['marginLeft'], paddingRight: dims['marginLeft']}, "fast");
				image.animate({height: dims['imgHeight'], width: dims['imgWidth'], marginLeft: dims['imarginLeft'],marginTop: dims['imarginTop']}, "fast", function(){
					if (fancy)
					{
						sig.css("marginTop", dims['sigDims'][0]);
						sig.css("height", dims['sigDims'][1]);
						scaleText(sig);
						title.css("marginTop", dims['titleDims'][0]);
						title.css("height", dims['titleDims'][1]);
						scaleText(title);
						location.css("height", dims['locDims'][1]);
						scaleText(location);
					}
				});
			},
			onBeforeClose: function(){
				var fancy = parseInt(el.attr("fancy"));
				var matboard = parseInt(el.attr("matboard"));
				var left = borderClone.css("left");
				var top  = borderClone.css("top");
				var left = borderClone.css("left");
				var top  = borderClone.css("top");
				var width = borderClone.width();
				var height = borderClone.height();
				var paddingTop = borderClone.css("paddingTop");
				var paddingLeft = borderClone.css("paddingLeft");
				var image = $("#largeImage", borderClone);
				var imgWidth = image.width();
				var imgHeight = image.height();

				var title = $("#border_title");
				var location = $("#border_loc");
				var sig = $("#border_sig");
				$("#largeImage", el).animate({width: imgWidth, height: imgHeight}, "fast", function(){
					if (fancy)
					{
						var sigDims = getSigDimensions(height);
						sig.css("marginTop", sigDims[0]);
						sig.css("height", sigDims[1]);
						scaleText(sig);
						var titleDims = getTitleDimensions(height);
						title.css("marginTop", titleDims[0]);
						title.css("height", titleDims[1]);
						scaleText(title);
						var locDims = getLocDimensions(height);
						location.css("height", locDims[1]);
						scaleText(location);
					}
				});
				el.animate({left: left, top: top, width: width, height: height, paddingTop: paddingTop, paddingLeft: paddingLeft, paddingRight:paddingLeft}, "fast", function(){
					el.css("left", "auto").css("top", "auto").css("position", "relative");
					if (!$(".shoppingbasket_container").length)				
					{
						el.css("width", "auto").css("height", "auto").css("paddingTop", "auto").css("paddingLeft", "auto").css("wipaddingRightdth", "auto");
					}
				});
				borderClone.remove();
			}
		});
	});
	
	bw = false;
});	


  //loadImage("scrollleft" ,"images/scrollleft.jpg" ,"images/scrollleft_h.jpg" ,"","",0,0,"","","");
  //loadImage("scrollright","images/scrollright.jpg","images/scrollright_h.jpg","","",0,0,"","","");

  function startScrollThumbsLeft(startscroll,selectthumb,faststart,fastend,numtomove)
  {
      startScroll = startscroll;
      selectThumb = selectthumb;
      fastStart   = faststart;
      fastEnd     = fastend;
      numToMove   = numtomove;
      
      scrollThumbsLeft();
  }
   
  function scrollThumbsLeft() 
  {
    if (!currentImage)
      currentImage = $(".selectedImage img").get(0);//document.getElementById(IMG_ID+1);

    if (startScroll)
    {
      //alert(currentPos);
      if (currentPos != stopPos)
        stopPos = stopPos-62;
      else
        stopPos = currentPos-62;
      initialPos=currentPos;
      imageid++; 
      numToMove--;
      if (!document.getElementById(IMG_ID+imageid))
      {
        imageid--;
        stopPos = currentPos;
        mouseOver(IMG_ID+imageid, true);
        currentImage = document.getElementById(IMG_ID+imageid);
        return;
      }
      mouseOut(currentImage.id, true);
      mouseOver(IMG_ID+imageid, false);
    }
    else if (currentPos < stopPos)
    {
      currentImage = document.getElementById(IMG_ID+imageid);
      currentPos = stopPos;
      mouseOver(IMG_ID+imageid, selectThumb);
      if (selectThumb)
        setLargeImage(currentImage.id);

			if (numToMove > 0)
      {
        startScroll = true;
        selectThumb = numToMove==1;
        fastStart   = true;
        fastEnd     = numToMove==1;
        setTimeout(scrollThumbsLeft,scrollSpeed);
      }
      return;
    }
    document.getElementById('divScroll').style.left=currentPos+'px';
  
    if (((currentPos>initialPos-10)&&(!fastStart)) || ((currentPos<stopPos+10)&&(!fastEnd)))
      currentPos--;
    else if (((currentPos>initialPos-20)&&(!fastStart)) || ((currentPos<stopPos+20)&&(!fastEnd)))
      currentPos-=2;
    else
      currentPos-=4;
    startScroll = false;
    setTimeout(scrollThumbsLeft,scrollSpeed);
  } 

  function startScrollThumbsRight(startscroll,selectthumb,faststart,fastend,numtomove)
  {
      startScroll = startscroll;
      selectThumb = selectthumb;
      fastStart   = faststart;
      fastEnd     = fastend;
      numToMove   = numtomove;

      scrollThumbsRight();
  }
   
  function scrollThumbsRight() 
  {
    if (startScroll)
    {
      if (currentPos != stopPos)
        stopPos = stopPos+62;
      else
        stopPos = currentPos+62;
      initialPos=currentPos;  
      imageid--;  
      numToMove--; 
      var currentId = currentImage.id;
      if (!document.getElementById(IMG_ID+imageid))
      {
        imageid++;
        stopPos = currentPos;
        mouseOver(IMG_ID+imageid, true);
        currentImage = document.getElementById(IMG_ID+imageid);
        return;
      }
      mouseOver(IMG_ID+imageid, false);
      mouseOut(currentId, true);
    }
    else if (currentPos > stopPos)
    {
      currentImage = document.getElementById(IMG_ID+imageid);
      currentPos = stopPos;
      mouseOver(IMG_ID+imageid, selectThumb);
      if (selectThumb)
        setLargeImage(currentImage.id);
      
			if (numToMove > 0)
      {
        startScroll = true;
        selectThumb = numToMove==1;
        fastStart   = true;
        fastEnd     = numToMove==1;
        setTimeout(scrollThumbsRight,scrollSpeed);
      }
      return;
    }
    
    document.getElementById('divScroll').style.left=currentPos+'px';
  
    if (((currentPos<initialPos+10)&&(!fastStart)) || ((currentPos>stopPos-10)&&(!fastEnd)))
      currentPos++;
    else if (((currentPos<initialPos+20)&&(!fastStart)) || ((currentPos > stopPos-20)&&(!fastEnd)))
      currentPos+=2;
    else
      currentPos+=4;
    
    startScroll = false;
    setTimeout(scrollThumbsRight,scrollSpeed);
  }
  
  function centreClickedThumb(thumb)
  {
    var currentid = currentImage.id.substring(IMG_ID.length,IMG_ID.length+2);
    var thumbid = thumb.substring(IMG_ID.length,IMG_ID.length+2);
    var move = currentid - thumbid;

    startScroll = true; 
    selectThumb = Math.abs(move)==1; 
    fastStart   = false;
    fastEnd     = Math.abs(move)>1; 
    numToMove   = Math.abs(move);
    if (move > 0)
      scrollThumbsRight();
    else if (move < 0)
      scrollThumbsLeft();

    return false; 
  }
  
  function autoScrollLeft()
  {
    return;
    if (!centrePosition)
      centrePosition = currentPos;

    if (backToCentre && currentPos <= centrePosition)
    {
      currentPos = centrePosition;
      document.getElementById('divScroll').style.left = currentPos+"px";
      centrePosition = 0;
      backToCentre = false;
      autoLeftId = 0;
      return;
    }

    if (backToCentre)
      currentPos -= 10;
    else
      currentPos -= 2;
    document.getElementById('divScroll').style.left = currentPos+"px";
    autoLeftId = setTimeout(autoScrollLeft, 10);
  }
  
  function autoScrollRight()
  {
    return;
    if (!centrePosition)
      centrePosition = currentPos;

    if (backToCentre && currentPos >= centrePosition)
    {
      currentPos = centrePosition;
      document.getElementById('divScroll').style.left = currentPos+"px";
      centrePosition = 0;
      backToCentre = false;
      autoRightId = 0;
      return;
    }
    
    if (backToCentre)
      currentPos += 10;
    else
      currentPos += 2;
    document.getElementById('divScroll').style.left = currentPos+"px";
    autoRightId = setTimeout(autoScrollRight, 10);
  }

  function mouseOver(image, selected)
  {
    var scrollButton = (image.indexOf('scroll') > -1);
    if (!currentImage)
      currentImage = $(".selectedImage img").get(0);//document.getElementById(IMG_ID+1);

    //alert("mouseOver()");
    overControl=true;
    if (scrollButton)
      overButton = true;
    else
      overImage = true;
      
    if (currentImage.id == image && !selected)
      return;
    if (!scrollButton)
    {
      var currentid = parseInt(currentImage.id.substring(IMG_ID.length,IMG_ID.length+2));
      var thumbid = parseInt(image.substring(IMG_ID.length,IMG_ID.length+3));
      if (thumbid < currentid)
        document.getElementById('divScroll').style.left = (parseInt(document.getElementById('divScroll').style.left)-10)+"px";
      var div = document.getElementById('div'+image);

      if (div)
      {
        if (selected)
          div.className = "selectedImage";
        else
          div.className = "hotImage";
      }
    }
        
    var img = document.getElementById(image);
		if (thumbs[image+"_hot"])
	    img.src = thumbs[image+"_hot"].src;

    if (scrollButton)
    {
      if (!hoveringOnButton)
      {
        hoveringOnButton = true;
        hoverId = setTimeout("mouseOver('"+image+"')", 1000);
      }
      else
      {
        if (image.indexOf('left') > -1)
          autoScrollLeft();
        else
          autoScrollRight();
      }
    }
  }
 
  function controlMouseOver()
  {
    overControl = true;
  }
  
  function controlMouseOut()
  {
      return;
      
    if (centrePosition)
    {
      if (autoLeftId)
      {
        autoLeftId = 0;
        backToCentre = true;
        autoScrollRight();
      }
      else if (autoRightId)
      {
        autoRightId = 0;
        backToCentre = true;
        autoScrollLeft();
      }
    }
  }
  
  function imageOver()
  {
    overControl = true;
  }
  
  function imageOut()
  {
  }

  function mouseOut(image,force)
  {
    var scrollButton = (image.indexOf('scroll') > -1);
    
    if (hoverId)
    {
      clearTimeout(hoverId);
      hoverId = 0;
      hoveringOnButton=false;
    }
    
    if (scrollButton)
    {
      if (autoLeftId)
        clearTimeout(autoLeftId);
      else if (autoRightId)
        clearTimeout(autoRightId);
    }
    
    if (!currentImage)
      currentImage = $(".selectedImage img").get(0);//document.getElementById(IMG_ID+1);

    if (currentImage.id == image && !force)
      return;
    var currentid = parseInt(currentImage.id.substring(IMG_ID.length,IMG_ID.length+2));
    var thumbid = parseInt(image.substring(IMG_ID.length,IMG_ID.length+3));
    if (thumbid < currentid)
      document.getElementById('divScroll').style.left = (parseInt(document.getElementById('divScroll').style.left)+10)+"px";
    var img = document.getElementById(image);
    img.src = thumbs[image].src;
    var div = document.getElementById('div'+image);
    if (div)
      div.className = "imageHolder";
  }
  
  function fadeImage()
  {
    var image = document.getElementById('largeImage');
    image.style.visibility = 'visible';
    setOpacity(image, 0);
    fadeInWithSelect(image.id,0,bw);
  }
  
  function imageClick(selectedImage)
  {
    centreClickedThumb(selectedImage);
  }

  function setLargeImage(selectedImage)
  {  
    if (fadeInId)
      clearTimeout(fadeInId);
    var image 						 = $('#largeImage');
    image.css("visibility", 'hidden');
    image.css("width", images[selectedImage].width);
    image.css("height", images[selectedImage].height);
    image.attr("src", images[selectedImage].src);
    image.attr("title", images[selectedImage].title);

    var title = $('#image_title');
    var thumb = $("#"+selectedImage);
    title.html(image.attr("title"));
		$("#image_loc").html(image.attr("location"));
		$(document).attr("title", image.attr("title")+" in "+$(".gallery_title").text()+" | Glenn Alderson Photography")

    var anchor = $('#enlarge');
    anchor.attr("href", images[selectedImage].src);
    anchor.attr("title", images[selectedImage].title);
    $('#showBW').click(function(){showBWImage(selectedImage);});
    $('#bw_text').html('show b/w version');
		if (bwimages[selectedImage] != null)
			$('#showBW').css("display", 'inline');
		else
			$('#showBW').css("display", 'none');
		bw = false;
		
		var thisPage = "http://"+location.hostname+"/galleryview.php?gallery_id="+gallery+"&gi="+images[selectedImage].gallery_item;
		setFBLikeButtons(".social", thisPage);
		
		_gaq.push(["_trackPageview", thisPage ]);
  }
  
	function setFBLikeButtons(container,url,send,layout,width,show_faces,font,verb,colorscheme) 
	{
		// Set Default Args
		if(!send) { send = "true"; }
		if(!layout) { layout = "standard"; }
		if(!width) { width = "450"; }
		if(!show_faces) { show_faces = "false"; }
		if(!font) { font = "verdana"; }
		if(!verb) { verb = "like"; }
		if(!colorscheme) { colorscheme = "dark"; }
		
		$("fb:like", $(container)).remove(); // Remove current like button
		$(container).html('<fb:like href="'+url+'" send="'+send+'" layout="'+layout+'" width="'+width+'" show_faces="'+show_faces+'" font="'+font+'" verb="'+verb+'" colorscheme="'+colorscheme+'"></fb:like>');
		FB.XFBML.parse(); // This is the magical syrup
	}

	function showBWImage(selectedImage)
  {  
    if (fadeInId)
      clearTimeout(fadeInId);
    var image 						 = $('#largeImage');
    image.css("visibility", 'hidden');
    image.css("width", bwimages[selectedImage].width);
    image.css("height", bwimages[selectedImage].height);
    image.attr("src", bwimages[selectedImage].src);
    image.attr("title", bwimages[selectedImage].title);

    var title = $('#image_title');
    var thumb = $("#"+selectedImage);
    title.html(image.attr("title"));
		$("#image_loc").html(image.attr("location"));
		$(document).attr("title", image.attr("title")+" in "+$(".gallery_title").text()+" | Glenn Alderson Photography")

    var anchor = $('#enlarge');
    anchor.attr("href", bwimages[selectedImage].src);
    anchor.attr("title", bwimages[selectedImage].title);

    $('#showBW').click(function(){setLargeImage(selectedImage);});
    var textBW = document.getElementById('bw_text');
    $('#bw_text').html('show colour version');
		bw = true;
  }

	function getBorderTopMargin(_height)
	{
		return _height*0.1;
	}
	
	function getBorderBottomMargin(_height)
	{
		return _height*0.2;
	}
	
	function getBorderLeftMargin(_width)
	{
		return _width*0.1;
	}
	
	function getSigDimensions(_height)
	{
		return [_height*0.0, _height*0.01] //topMargin, height
	}
	
	function getTitleDimensions(_width, _height)
	{
		return [_height*0.03, _width*0.04] //topMargin, height
	}
	
	function getLocDimensions(_height)
	{
		return [_height*0.00, _height*0.02] //topMargin, height
	}
	
	function calcImageBorderDims(availWidth, availHeight, borderRatio, imgRatio)
	{
		var dims = new Array();
		dims['width'] = availWidth;
		dims['height'] = availWidth*borderRatio;
		if (dims['height'] > availHeight && availHeight > -1)
		{
			dims['width'] = availHeight/borderRatio;
			dims['height'] = availHeight;
		}
		dims['marginTop'] = getBorderTopMargin(dims['height']); //top margin 10% height;
		dims['marginBottom'] = getBorderBottomMargin(dims['height']); //top margin 20% height;
		dims['imgHeight'] = dims['height']-dims['marginTop']-dims['marginBottom'];
		dims['imgWidth'] = dims['imgHeight']/imgRatio;
		dims['marginLeft'] = (dims['width']-dims['imgWidth'])/2;
		if (dims['marginLeft'] < dims['marginTop'])
		{
			dims['marginLeft'] = dims['marginTop'];
			dims['imgWidth'] = dims['width'] - (dims['marginLeft']*2);
			dims['imgHeight'] = dims['imgWidth']*imgRatio;
		}
		
		if (imgRatio > 1) //image is portait
		{
			dims['sigDims'] = getSigDimensions(dims['width']);
			dims['titleDims'] = getTitleDimensions(dims['width'], dims['height']);
			dims['locDims'] = getLocDimensions(dims['width']);
		}
		else
		{
			dims['sigDims'] = getSigDimensions(dims['height']);
			dims['titleDims'] = getTitleDimensions(dims['height'], dims['height']);
			dims['locDims'] = getLocDimensions(dims['height']);
		}

		return dims;
	}
	
	function setupPhotoBorder(_width, _height, _fancy)
	{
		var image = $('#largeImage');
		var border = $('#border');
		var sig = $('#border_sig');
		var title = $('#border_title');
		var location = $('#border_loc');
		var currImage = images[currentImage.id];
		
		border.css("backgroundColor", _fancy?"white":"transparent");
		border.css("height", "auto");
		border.css("width", "auto");
		border.css("padding-top", 0);
		border.css("paddingLeft", 0);
		border.css("paddingRight", 0);
		var availWidth = border.width();
		var origWidth  = image.width();
		var origHeight = image.height();
		var imgRatio = origHeight/origWidth;
		if (imgRatio >= 1) //image is portrait
		{
			var temp = _width;
			_width = _height;
			_height = temp;
		}
		var ratio = _height/_width;
		var dims
		border.attr("fancy", _fancy);
		border.attr("matboard", 0);
		if (_fancy)
		{
			$("#image_title").hide();
			$("#image_loc").hide();
			
			dims = calcImageBorderDims(availWidth, availWidth, ratio, imgRatio);
			dims['imarginTop'] = 0;
			dims['imarginLeft'] = 0;
		}
		else
		{
			$("#image_title").show();
			$("#image_loc").show();
			
			dims = new Array();
			dims['width'] = availWidth;
			dims['height'] = availWidth*ratio;
			if (dims['height'] > availWidth)
			{
				dims['height'] = availWidth;
				dims['width'] = availWidth/ratio;
			}
			dims['imgWidth'] = dims['width'];
			dims['imgHeight'] = dims['imgWidth']*imgRatio;
			if (dims['imgHeight'] < dims['height'])
			{
				dims['imgHeight'] = dims['height'];
				dims['imgWidth'] = dims['imgHeight']/imgRatio;
			}
			dims['marginTop'] = 0;
			dims['marginLeft'] = 0;
			dims['marginRight'] = 0;
			dims['imarginTop'] = (dims['height']-dims['imgHeight'])/2;
			dims['imarginLeft'] = (dims['width']-dims['imgWidth'])/2;
		}
		
		border.css("height", dims['height']-dims['marginTop']+"px");
		border.css("width", dims['width']-(dims['marginLeft']*2)+"px");
		border.css("paddingTop", dims['marginTop']+"px");
		border.css("paddingLeft", dims['marginLeft']+"px");
		border.css("paddingRight", dims['marginLeft']+"px");
		image.height(dims['imgHeight']);
		image.width(dims['imgWidth']);
		image.css("marginLeft", dims['imarginLeft']);
		image.css("marginTop", dims['imarginTop']);
		image.css("border", "1px solid black");

		if (_fancy)
		{
			sig.html("Glenn Alderson Photography");
			sig.css("marginTop", dims['sigDims'][0]);
			sig.css("height", dims['sigDims'][1]);
			scaleText(sig);
			title.html(currImage.title);
			title.css("marginTop", dims['titleDims'][0]);
			title.css("height", dims['titleDims'][1]);
			scaleText(title);
			location.html(currImage.location);
			location.css("height", dims['locDims'][1]);
			scaleText(location);
		}
		else
		{
			sig.html("");
			title.html("");
			location.html("");
		}
	}
	
	function calcImageMatBoardDims(availWidth, availHeight, borderRatio, imgRatio)
	{
		var dims = new Array();
		dims['width'] = availWidth;
		dims['height'] = availWidth*borderRatio;
		if (dims['height'] > availHeight && availHeight > -1)
		{
			dims['width'] = availHeight/borderRatio;
			dims['height'] = availHeight;
		}
		dims['marginTop'] = getBorderTopMargin(Math.min(dims['height'], dims['width'])); //top margin 10% height;
		dims['marginBottom'] = dims['marginTop']; //top margin 10% height;
		dims['imgHeight'] = dims['height']-dims['marginTop']-dims['marginBottom'];
		dims['imgWidth'] = dims['imgHeight']/imgRatio;
		dims['marginLeft'] = (dims['width']-dims['imgWidth'])/2;
		if (dims['marginLeft'] < dims['marginTop'])
		{
			dims['marginLeft'] = dims['marginTop'];
			dims['imgWidth'] = dims['width'] - (dims['marginLeft']*2);
			dims['imgHeight'] = dims['imgWidth']*imgRatio;
			dims['marginTop'] = (dims['height']-dims['imgHeight'])/2;
		}
		
		return dims;
	}
	
	function setupMatBoard(_width, _height, _bg)
	{
		var image = $('#largeImage');
		var border = $('#border');
		var sig = $('#border_sig');
		var title = $('#border_title');
		var location = $('#border_loc');
		var currImage = images[currentImage.id];
		
		border.css("backgroundColor", _bg);
		border.css("height", "auto");
		border.css("width", "auto");
		border.css("padding-top", 0);
		border.css("paddingLeft", 0);
		border.css("paddingRight", 0);
		var availWidth = border.width();
		var origWidth  = image.width();
		var origHeight = image.height();
		var imgRatio = origHeight/origWidth;
		if (imgRatio >= 1) //image is portrait
		{
			var temp = _width;
			_width = _height;
			_height = temp;
		}
		var ratio = _height/_width;
		var dims
		border.attr("fancy", 0);
		border.attr("matboard", 1);

		$("#image_title").show();
		$("#image_loc").show();
		
		dims = calcImageMatBoardDims(availWidth, availWidth, ratio, imgRatio);
		dims['imarginTop'] = 0;
		dims['imarginLeft'] = 0;
		
		border.css("height", dims['height']-dims['marginTop']+"px");
		border.css("width", dims['width']-(dims['marginLeft']*2)+"px");
		border.css("paddingTop", dims['marginTop']+"px");
		border.css("paddingLeft", dims['marginLeft']+"px");
		border.css("paddingRight", dims['marginLeft']+"px");
		image.height(dims['imgHeight']);
		image.width(dims['imgWidth']);
		image.css("marginLeft", dims['imarginLeft']);
		image.css("marginTop", dims['imarginTop']);
		
		var imgBorderWidth = Math.max(dims['imgHeight'], dims['imgWidth'])*0.004;
		image.css("borderTop", imgBorderWidth+"px solid #D9D9D9");
		image.css("borderRight", imgBorderWidth+"px solid #FFFFFF");
		image.css("borderBottom", imgBorderWidth+"px solid #FFFFFF");
		image.css("borderLeft", imgBorderWidth+"px solid #D9D9D9");

		sig.html("");
		title.html("");
		location.html("");
	}
	
	function scaleText(title)
	{
		var $this = $(title);
		if (!$this.html().length)
			return;
		var boxWidth = $(title).css("width");
		var boxHeight = $(title).css("height");
		var fontSize = Math.min(parseInt($(title).css("fontSize"), 10), 10);
		var $line;
		var lineWidth, lineHeight;
		
		if (!$("span", $this).length)
			$this.html(function(i,v) {
				return $("<span>").html(v).css("whiteSpace", "nowrap");
			});
			
		$line = $this.children("span").first();
		$line.css("fontSize", fontSize+"px");
		lineWidth = $line.css("width");
		lineHeight = $line.css("height");
		
		while ( parseInt(lineWidth) < parseInt(boxWidth) && parseInt(lineHeight) < parseInt(boxHeight) ) {
			fontSize += 1;
			$line.css("fontSize", fontSize + "px");
			lineWidth = $line.css("width");
			lineHeight = $line.css("height");
		}
		
		fontSize -= 1;
		$line.css("fontSize", fontSize + "px");
	}