document.GalleryDisplayIntervalID = 0;

function GalleryViewer(data_arr){
	$tn_arr = new Array();
	for(var i=0; i< data_arr.length; i++){
		$tn_arr[i] = createThumbnail(data_arr[i], $(".tn-container"));
		}
		for(var i in $tn_arr){
			$tn_arr[i].css({opacity:0.6})
			$tn_arr[i].bind('mouseenter', rollOverHandler);
			$tn_arr[i].bind('mouseleave', rollOutHandler);
			$tn_arr[i].bind('click', {src:data_arr[i].imgSrc, alt:data_arr[i].alt, href:data_arr[i].href}, clickHandler);
		}
		$tn_arr[0].trigger('click');
		$tn_arr[0].css({opacity:1});
		$(".gallery").bind('mouseenter', stopAutoDisplay);
		$(".gallery").bind('mouseleave', startAutoDisplay);
		$(".gallery").triggerHandler('mouseleave')

	
function centreItem(maxWidth, maxHeight, containerWidth, containerHeight, borderWidth){
	var w = $("img", this).width();
	var h = $("img", this).height();
	var r = (w>h)? (h/w):(w/h);
	$("img", this).css({width:((w>h)? maxWidth:maxWidth*r)-2*borderWidth, height:((h>w)? maxHeight:maxHeight*r)-2*borderWidth, top:(containerHeight - ((w>h)? maxHeight*r:maxHeight))/2 +"px", left:(containerWidth - ((h>w)? maxWidth*r:maxWidth))/2 + "px "});
	}
	
function createThumbnail(data_obj, target){
	var container = $("<li></li>")
	container.append("<img rel=''src='' alt='' />");
	target.append(container)
	$("img", container).load(function(){centreItem.apply($(this).parent(), [70,70,72,72, 1]);})
		$("img", container).attr({'rel':data_obj.imgSrc, 'src':data_obj.tnSrc, 'alt':data_obj.alt})
	return container;
	}

function rollOverHandler(evt){
	if(!$(this).hasClass('active')){
		$(this).stop().fadeTo(250, 1);
	}
}
	
function rollOutHandler(evt){
	if(!$(this).hasClass('active')){
		$(this).stop().fadeTo(250, 0.6);
	}
}

function clickHandler(evt){
	if(!$(this).hasClass('active')){
		$(".tn-container .active").removeClass('active').triggerHandler('mouseleave');
		$(this).addClass('active');
		$(".gallery .img-container img").unbind('mouseenter', imgMouseOverHandler);
		$(".gallery .img-container img").unbind('mouseleave', imgMouseOutHandler);
		if($(".gallery .img-container img").length > 0){
			$(".gallery .img-container img").fadeOut(250, function(){
				$(".gallery .img-container").html(""); showImage(evt);
			});
		}else{
			showImage(evt);
		}
	}
}
	
function showImage(evt){
	$(".gallery .img-container").append("<img src='' alt='' />");
	$(".gallery .img-container img").hide();
	$(".gallery .img-container img").load(function(){
		centreItem.apply($(".gallery .img-container"), [238,238,300,258, 1]);
		$(this).fadeIn(250, function(){
			$(".gallery .img-container img").bind('mouseenter', imgMouseOverHandler);
			$(".gallery .img-container img").bind('mouseleave', imgMouseOutHandler);
		});
	});
	$(".gallery .img-container img").attr({'src':evt.data.src, 'alt':evt.data.alt});
	$(".gallery .img-container img").bind('click', {href:evt.data.href},imgClickHandler);
}

function imgClickHandler(evt){
	window.location = evt.data.href;
	}

function imgMouseOverHandler(){
	var oh = $(this).height();
	var ow = $(this).width();
	var r = (oh>ow)? ow/oh:oh/ow;
	var nh = (oh>ow)? 336:336*r;
	var nw = (ow>oh)? 336:336*r;
	var dw = nw - ((ow>oh)? 238:238*r)
	var dh = nh - ((oh>ow)? 238:238*r)
	var nl = ((300 - ((ow>oh)? 238:238*r))/2) - dw/2;
	var nt = ((238 - ((oh>ow)? 238:238*r))/2) - dh/2;
	$(this).stop().animate({left:nl, top:nt, width:nw, height:nh})
	}
	
function imgMouseOutHandler(){
	var oh = $(this).height();
	var ow = $(this).width();
	var r = (oh>ow)? ow/oh:oh/ow;
	var nh = (oh>ow)? 236:236*r;
	var nw = (ow>oh)? 236:236*r;
	var nl = (300 - ((ow>oh)? 238:238*r))/2;
	var nt = (258 - ((oh>ow)? 238:238*r))/2;
	$(this).stop().animate({left:nl, top:nt, width:nw, height:nh})
	}
	
function startAutoDisplay(evt){
	document.GalleryDisplayIntervalID = setInterval(function(){var $next = ($(".tn-container .active").next("li").length != 0)? $(".tn-container .active").next("li"):$(".tn-container li:first"); $next.triggerHandler('mouseenter');$next.triggerHandler('click');}, 8000);
	}
function stopAutoDisplay(evt){
	clearInterval(document.GalleryDisplayIntervalID);
	}
}