// Phone Number Mask
function mask(f){ 
tel='('; 
var val =f.value.split(''); 
for(var i=0;i<val.length;i++){ 
if(i==2){val[i]=val[i]+')'} 
if(i==5){val[i]=val[i]+'-'} 
tel=tel+val[i] 
} 
f.value=tel; 
}

// jQuery Section
$(document).ready(function(){
$("img.graphic").fadeTo(0, 0.0);
$("img.graphic").fadeTo(1000, 1.0);
}); 

$(document).ready(function(){
$("#graphic").animate({opacity: 0.0}, 0);
$("#graphic").animate({opacity: 1.0}, 1000);
}); 

// Gallery Viewer
$(document).ready(function(){
	$("#galleryView").animate({opacity: 0.0}, 0);
	setTimeout(function() {
		$("#galleryView").animate({opacity: 1.0}, 1000);
	}, 300);
}); 

// MiniPad Cart Element
$(document).ready(function(){
$("td.MiniPad").fadeTo(0, 0.0);

setTimeout(function() {
	$("td.MiniPad").fadeTo(1000, 1.0);
	}, 500);
	setTimeout(function() {
		$("td.MiniPad").animate({height:"0", opacity: 0.0}, 1000);
	}, 5000);
$("td.MiniPad").hover(function(){
	$(this).animate({opacity: 1.0}, 100);
		},function(){
		$(this).animate({height:"0", opacity: 0.0}, 1000);
		});
});


// Gallery Thumb Viewer
$(document).ready(function(){
$("#thumbs").hover(function(){
	$(this).animate({opacity: 1.0}, 500);
		},function(){
		$(this).animate({opacity: 0.5}, 500);
		});
});

/********************************************************************************************************************************************************************************/
/* 																				Thumb Experiment 																				*/
/********************************************************************************************************************************************************************************/

$("td.thumbs img").hover(function() {
	$(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/ 
	$(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
		.animate({
			marginTop: '-110px', /* The next 4 lines will vertically align this image */ 
			marginLeft: '-110px',
			top: '50%',
			left: '50%',
			width: '174px', /* Set new width */
			height: '174px', /* Set new height */
			padding: '20px'
		}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */

	} , function() {
	$(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
	$(this).find('img').removeClass("hover").stop()  /* Remove the "hover" class , then stop animation queue buildup*/
		.animate({
			marginTop: '0', /* Set alignment back to default */
			marginLeft: '0',
			top: '0',
			left: '0',
			width: '100px', /* Set width back to default */
			height: '100px', /* Set height back to default */
			padding: '5px'
		}, 400);
});