$(document).ready( function() {
	//If javascript is enabled, add a close button to the tab div. Need to specify the width and height so IE6 doesn't flip out.
	$close_button = '<div id="tab_div"><a href="javascript:void(0);" class="open"><img id="tab_img" style="width: 25px; height: 81px;" src="./bpimages/tab_close.png" alt="Close" /></a></div>';
	$open_button = '<div id="tab_div"><a href="javascript:void(0);" class="closed"><img id="tab_img" style="width: 25px; height: 81px;" src="./bpimages/tab_open.png" alt="Open" /></a></div>';
	$("#tab").append($close_button);
	$("#instructions").append('<p>Click on the <a href="javascript:closeTab();">enlarge</a> tab to view larger image.</p>');
	initTabs();
	initButtons();
});

// Initialize ROLLOVERS
function initButtons(){
	$(".button").each( function(){
		var up = $(this).attr('src');
		var over = up.split('.gif')[0]+'_over.gif';
		$(this).mouseout(function(){
		  $(this).attr({'src':up});
		}).mouseover(function(){
		  $(this).attr({'src':over});
		});
		
		// Preload these rollover images
		$("body").append('<img src="'+over+'" alt="" class="preloader" />');
	});
}

function initTabs(){
	$("#tab a").click(function(){
		switch($(this).attr('class')){
			case 'open':
				closeTab();
			break;
			case 'closed':
				openTab();
			break;
		}
	});
}

function closeTab() {
	$("#copy").animate({
		opacity: 0
	}, 300 );
	
	setTimeout(function(){
		$("#copy").css({
			display: 'none'
		});
	}, 300);
	
	setTimeout(function(){
		$("#copy_container").animate({
			width: "0px"
		}, { duration: 700, easing: "easeOutExpo"  });
	}, 300);
	
	$(this).attr({'class': 'closed'});
	$("#tab_div").replaceWith($open_button);
	$("#instructions p").remove();
	initTabs();
}

function openTab(){
	$("#instructions").append('<p>Click on the <a href="javascript:closeTab();">close</a> tab to view larger image.</p>');
	$("#copy_container").animate({
		width: "446px"
	}, { duration: 700, easing: "easeOutExpo" });
	
	setTimeout(function(){
		$("#copy").css({
			display: 'block'
		}).animate({
			opacity: 1
		}, 300 );
	}, 700);
	$(this).attr({'class': 'open'});
	$("#tab_div").replaceWith($close_button);
	initTabs();
}

function slideshow(){
	$("#view_larger_image a").click( function() {
		var new_image = $(this).attr('rel');
		if ($(this).hasClass('changed')){
			$("#frame_background_2").css({'background-image':'url('+new_image+')'});
			$("#frame_background_2").fadeIn();
			$(this).removeClass('changed');			
		} else {
			$("#frame_background").css({'background-image':'url('+new_image+')'});
			$("#frame_background_2").fadeOut();
			$(this).addClass('changed');			
		}
		closeTab();
	});	
}
// initButtons for MOUSEDOWN/UP
/*function initButtons(){
	$(".button").each( function(){
		var up = $(this).find("img").attr('src');
		var over = up.split('.gif')[0]+'_over.gif';
		$(this).mouseup(function(){
		  $(this).find("img").attr({'src':up});
		}).mousedown(function(){
		  $(this).find("img").attr({'src':over});
		}).mouseout(function(){
		  $(this).find("img").attr({'src':up});
		});
	});
}
*/