$(document).ready(function(event){
	resizeBgdiv();
	if($('#gallery_slide_c').length){
		toggleButtons();
		$("#gallery_control_next_a").click(function(event){event.preventDefault()});
		$("#gallery_control_prev_a").click(function(event){event.preventDefault()});
		$("#gallery_control_next_a").hover(function(){ 
				$("#gallery_thumbs_ul").data('loop', true).stop().navigateThumbs('next'); 
			}, function(){ 
				$("#gallery_thumbs_ul").data('loop', false);
		}); 
		$("#gallery_control_prev_a").hover(function(){ 
				$("#gallery_thumbs_ul").data('loop', true).stop().navigateThumbs('prev'); 
			}, function(){ 
				$("#gallery_thumbs_ul").data('loop', false);
		}); 
		$('#gallery_slide_c').mouseenter(function(){fadeSlide('over','slow')});
		$('#gallery_slide_c').mouseleave(function(){fadeSlide('out','slow')});
		// fade it onload, so the user sees it
		fadeSlide('out',1500)
	}
	$('div.gal_thumb_rel').mouseenter(function(){rollThumb(this,'over')});
	$('div.gal_thumb_rel').mouseleave(function(){rollThumb(this,'out')});
});
$(window).resize(function(event){
	resizeBgdiv();
	if($('#gallery_slide_c').length){toggleButtons()}
});

// return object of sizes 
function getSizes(){
	var sizes={};
	sizes.window_w=$(window).width();
	sizes.content_w=$('#body_r').width();
	sizes.bgimage_w=parseInt(sizes.window_w-sizes.content_w);
	sizes.bgimage_h=$('#body_l').height();
	sizes.thumbslider_w=$('#gallery_thumbs').width();
	sizes.thumbul_w=parseInt($('#gallery_thumbs_ul').width()-7);
	return sizes;
}

// resize the bg div 
function resizeBgdiv(){
	var sizes=getSizes();
	// resize the divs 	
	$('#body_l').css('width',sizes.bgimage_w);
	$('#bgimage_c').css('width',sizes.bgimage_w);
	$('#bgimage_cache_c').css('width',sizes.bgimage_w);
	// resize the image 
	resizeImage('bgimage','bgimg');
}

// set the background image
function resizeImage(el,img){
	var sizes=getSizes(),
			el_div=$("#"+el),
			el_img=$("#"+img),
			width=el_img.attr("data-width"),
			height=el_img.attr("data-height"),
			ratio=width/height;
			
	// fix the ratio and positioning 
	if(sizes.bgimage_h > (sizes.bgimage_w / ratio)){
		el_div.css('width',Math.ceil(sizes.bgimage_h*ratio)+'px');
		margin="0 0 0 "+Math.round((sizes.bgimage_w-(sizes.bgimage_h*ratio))/2) +"px";
		el_div.css('margin',margin);
	}else{
		// set it back to default 
		el_div.css('width','100%');
		el_div.css('margin','0');
	}
}

// fade/show the gallery slide 
function fadeSlide(state,dur){
	if(!$.browser.msie){
		if(state=='over'){
			// opaque 
			$('#gallery_slide_c').fadeTo(dur,1);		
		}else{
			// trans
			$('#gallery_slide_c').fadeTo(dur,0.2);
		}
	}
}

// set the background image
function setImage(src,width,height,id){
	// get the current id to make sure its not the same image 
	var curr_id=$('#bgimg').attr("data-id");
	if(id != curr_id){
		// show the ajax indicator to tell the user we are working
		$('#ajax_gallery').show();
		// deselect the old image and select the new (don't forget bout ie6 too) 
		$('#gal_thumb_li_'+curr_id).removeClass("gal_thumb_li_selected");
		$('#gal_thumb_li_'+id).addClass("gal_thumb_li_selected");
		// write the entire new img to the cache div
		$('#bgimage_cache').html('<img src="'+src+'" id="bgimg_cache" width="100%" data-width="'+width+'" data-height="'+height+'" data-id="'+id+'" />');
		
		if(($.browser.msie && parseInt($.browser.version) < 8) || navigator.userAgent.toLowerCase().indexOf('chrome') > -1){
			// ie 6&7 can;t see load() on image, so auto run 
			writeImage(src,width,height,id);
		}else{
			// all other browsers
			$("#bgimg_cache").load(function(){
				writeImage(src,width,height,id);
			});
		}
		
	}
}
function writeImage(src,width,height,id){
	// now that the cached image is loaded, get ready to write it to the visible layer 
	var new_img='<img src="'+src+'" id="bgimg" width="100%" data-width="'+width+'" data-height="'+height+'" data-id="'+id+'" />';
	$('#ajax_gallery').hide();
	$('#bgimage').fadeOut(300,function(){
		$('#bgimage').html(new_img);
		resizeImage('bgimage','bgimg');
		$('#bgimage').fadeIn(300);
	});
}

// navigate the thumbs 
$.fn.navigateThumbs=function(dir){
	var speed=42 
	if(dir=='next'){
		var mVal="-="+speed;
		if($('#gallery_control_next_a').hasClass("disabled")){var allowed=false}else{var allowed=true}
	}else{
		var mVal="+="+speed;
		if($('#gallery_control_prev_a').hasClass("disabled")){var allowed=false}else{var allowed=true}
	}
	if(allowed){
		if($("#gallery_thumbs_ul").data('loop')==true){ 
			$("#gallery_thumbs_ul").animate(
				{marginLeft:mVal},{
				duration:280,
				easing:'linear',
				step:function(){
					allowAnim=toggleButtons();
					if(dir=='next'){
						if(!allowAnim[1]){$("#gallery_thumbs_ul").stop()}
					}else{
						if(!allowAnim[0]){$("#gallery_thumbs_ul").stop()}
					}
				},
				complete:function(){ 
					if($("#gallery_thumbs_ul").data('loop')==true) $("#gallery_thumbs_ul").navigateThumbs(dir);toggleButtons();
				}});
			}
		return this;
	}
}

// toggle the next/prevs on and off 
function toggleButtons(){
	var sizes=getSizes(),
			ul_left_unsigned=parseInt($('#gallery_thumbs_ul').css("margin-left").replace("px","").replace("-","")),
			ul_left_signed=parseInt($('#gallery_thumbs_ul').css("margin-left").replace("px","")),
			real_ul_w=parseInt(sizes.thumbul_w-ul_left_unsigned),
			prevOn=false,
			nextOn=true;
	// do we have to allow next?
	if(real_ul_w > sizes.thumbslider_w){
		nextOn=true;
	}else{
		nextOn=false;
	}
	// allow prev?
	if(ul_left_signed < 0){
		prevOn=true;
	}else{
		prevOn=false;
	}
	// set the classes
	if(prevOn){
		// prev is on
		$('#gallery_control_prev_a').removeClass('disabled');
	}else{
		// prev is off 
		$('#gallery_control_prev_a').addClass('disabled');
	}
	if(nextOn){
		// next is on 
		$('#gallery_control_next_a').removeClass('disabled');
	}else{
		// next is off 
		$('#gallery_control_next_a').addClass('disabled');
	}
	return [prevOn,nextOn];
}

// hover/rollover of thumbs
function rollThumb(el,state){
	var duration=200;
	if(state=="over"){
		var size="8px";
	}else{
		var size="1px";
	}
	$(el).find("div.gal_bdr_t").animate({height:size},duration);
	$(el).find("div.gal_bdr_b").animate({height:size},duration);
	$(el).find("div.gal_bdr_r").animate({width:size},duration);
	$(el).find("div.gal_bdr_l").animate({width:size},duration);
}