// JavaScript Document

/************ Sets the size and position of the Full Sized Homepage Image and navigation items ***********/

function setHomepageSize(e){
	 
  var imgOrigWidth = 1680;
	var imgOrigHeight = 1200;
	//aspect ratio is the original jpeg width/height
	var aspectRatio = imgOrigWidth/imgOrigHeight;
	
	//Nav Items default px dimensions
	var navItemWidth = 120;
	var navItemHeight = 50;
	//Nav Items parallel arrays for selectors, x and y px positions (center of 120x50 hitarea relative to original image size)
	var navArray = Array('#about', '#maude', '#news', '#cabinet', '#showcase', '#contact', '#clotheshorse');
	var navXArray = Array(40, 000, 40, 40, 000, 000, 0000);
	var navYArray = Array(600, 000, 700, 500, 000, 0000, 000);
	
	//get dimensions of browser window
	var windowWidth = $(window).width();
	var windowHeight = $(window).height();
	var windowRatio = windowWidth/windowHeight;
	
	//set default image size and position
	var imgWidth = windowWidth;
	var imgHeight = windowHeight;
	var imgX = 0;
	var imgY = 0;
	var scale = 1;
	var left = 0;
	var top = 0;
	
	//if browser window is wider than the image
	if(windowRatio>aspectRatio){
		
		//set the image width to the window width and set the height to maintain the aspectRatio
		imgHeight = windowWidth/aspectRatio;
		//position slightly higher than the vertical center so that envelope is visible in wide screen formats
		imgY = (windowHeight - imgHeight)/1.75;
		scale=imgWidth/imgOrigWidth;

	} else //if browser window is wider than the image
	{
		//set the image height to the window height and set the width to maintain the aspectRatio
		imgWidth = windowHeight*aspectRatio;
		//position in the horizontal center
		imgX = (windowWidth - imgWidth)/2;
		scale=imgHeight/imgOrigHeight;
	}
	
	$("#homepageImage").css({ 'width': imgWidth+'px', 'height': imgHeight+'px', 'margin-top': imgY+'px', 'margin-left': imgX+'px'});
	
	//loop through navArray (selectors) and apply x and y positioning
	for(var i =0; i < navArray.length; i++){
		//get the width of the particular navItem
		navItemWidth = $(navArray[i]).css("width").replace("px", "");
		left = navXArray[i]*scale+imgX-navItemWidth/2; 
		top = navYArray[i]*scale+imgY-navItemHeight/2;
		if (top >  windowHeight-40){
			top = windowHeight-40;
		}
		$(navArray[i]).css({'top': top+'px', 'left': left+'px'});
	}
	
}

/************ Sets the size and position of the Contact Page Image  ***********/

function setContactPage(e){
	 
  var imgOrigWidth = 1680;
	var imgOrigHeight = 1260;
	//aspect ratio is the original jpeg width/height
	var aspectRatio = imgOrigWidth/imgOrigHeight;
	
	//get dimensions of browser window
	var windowWidth = $(window).width();
	var windowHeight = $(window).height();
	var windowRatio = windowWidth/windowHeight;
	
	//set default image size and position
	var imgWidth = windowWidth;
	var imgHeight = windowHeight;
	var imgX = 0;
	var imgY = 0;
	var scale = 1;
	
	var emailOrigWidth = 405;
	var emailOrigHeight = 44;
	var emailWidth = emailOrigWidth;
	var emailHeight = emailOrigHeight;
	var emailOrigX = 339;
	var emailOrigY = 319;
	var emailX = 0;
	var emailY = 0;
	
	//if browser window is wider than the image
	if(windowRatio>aspectRatio){
		
		//set the image width to the window width and set the height to maintain the aspectRatio
		imgHeight = windowWidth/aspectRatio;
		//position in the vertical center
		//imgY = (windowHeight - imgHeight)/2;
		scale = imgWidth/imgOrigWidth;

	} else //if browser window is wider than the image
	{
		//set the image height to the window height and set the width to maintain the aspectRatio
		imgWidth = windowHeight*aspectRatio;
		//position in the horizontal center
		imgX = (windowWidth - imgWidth)/2;
		scale = imgHeight/imgOrigHeight;
	}
	
	$("#contactImage").css({ 'width': imgWidth+'px', 'height': imgHeight+'px', 'margin-top': imgY+'px', 'margin-left': imgX+'px'});
	
	//scale and position the email link image based on the scaling of the contact image
	emailWidth = emailOrigWidth*scale;
	emailHeight = emailOrigHeight*scale;
	emailX = emailOrigX*scale+imgX;
	emailY = emailOrigY*scale;
	
	$("#emailImage").css({ 'width': emailWidth+'px', 'height': emailHeight+'px', 'top': emailY+'px', 'left': emailX+'px'});
	$("#copyright").css({ 'left': emailX+'px'});
	
}

/************ Sets the size and position of a Full Sized Image  ***********/

function setFullscreenSize(e){
	 
  var imgOrigWidth = 1680;
	var imgOrigHeight = 1261;
	//aspect ratio is the original jpeg width/height
	var aspectRatio = imgOrigWidth/imgOrigHeight;
	
	//get dimensions of browser window
	var windowWidth = $(window).width();
	var windowHeight = $(window).height();
	var windowRatio = windowWidth/windowHeight;
	
	//set default image size and position
	var imgWidth = windowWidth;
	var imgHeight = windowHeight;
	var imgX = 0;
	var imgY = 0;
	
	//if browser window is wider than the image
	if(windowRatio>aspectRatio){
		
		//set the image width to the window width and set the height to maintain the aspectRatio
		imgHeight = windowWidth/aspectRatio;
		
		if(vertAlign=="bottom"){
			//align the image close to the bottom
			imgY = (windowHeight - imgHeight)/1.25;

		} else{
			//position in the vertical center
			imgY = (windowHeight - imgHeight)/2;
		}

	} else //if browser window is wider than the image
	{
		//set the image height to the window height and set the width to maintain the aspectRatio
		imgWidth = windowHeight*aspectRatio;
		//position in the horizontal center
		imgX = (windowWidth - imgWidth)/2;
	}
	
	$("#fullscreenImage").css({ 'width': imgWidth+'px', 'height': imgHeight+'px', 'margin-top': imgY+'px', 'margin-left': imgX+'px'});
	
}

/************ Sets the size and position of a Full Height Image  ***********/

function setFullHeightImage(e){
	 
	var scale = 1;
	//aspect ratio is the original jpeg width/height
	var aspectRatio = imgOrigWidth/imgOrigHeight;
	
	//get dimensions of browser window
	var windowWidth = $(window).width();
	var windowHeight = $(window).height();
	var windowRatio = windowWidth/windowHeight;
	
	//set default image size and position
	var imgHeight = windowHeight;
	imgWidth = windowWidth;
	var imgY = 0;
	
	/*if the image is a wider ratio than the window then the image height is set to window height
	and the image width scaled to maintain aspect ratio of the image*/
	if(aspectRatio>windowRatio){
		
		scale = windowHeight/imgOrigHeight;
		imgWidth = imgOrigWidth*scale;
		
		//if the image is right aligned then reposition its x position based on the new window width
		if(imgX<0){
			imgX = 	$(window).width() - imgWidth;
		}
		
	}else //if the image is a narrower ratio then set the image width to the window width and crop the height
	{
		scale = windowWidth/imgOrigWidth;
		imgHeight = imgOrigHeight*scale;
		//position in the vertical center
		imgY = (windowHeight - imgHeight)/2;
		imgX = 0;
	}
	
	$("#fullheightImage").css({ 'width': imgWidth+'px', 'height': imgHeight+'px', 'margin-top': imgY+'px', 'margin-left': imgX+'px'});
	
}

/************ Sets position of a Fixed Height Image  ***********/

function setFixedHeightImage(){
	var windowHeight = $(window).height();
	switch(ypos){
		case 'top':
			imgY = 0
			var navY = imgHeight+25;
			$(".navItem").css({'top':navY});
			break;
		case 'middle':
			imgY = (windowHeight - imgHeight)/2;
			break;
		case 'bottom':
			imgY = windowHeight - imgHeight;
	}
	
	/*if the image is right aligned then reposition its x position based on the new window width
	but only if the imagewidth is greater than the window width*/
	if((imgX < 0) && (imgWidth > $(window).width())){
		imgX = 	$(window).width() - imgWidth;
	} else {
		imgX=0;
	}
	
	$("#fixedheightImage").css({'margin-top': imgY+'px','margin-left': imgX+'px'});
}


/************ Sets position of a Cabinet Image  ***********/

function setCabinetImage(){
	
/*  var imgOrigWidth = 1120;
	var imgOrigHeight = 836;*/
	var imgHeight = imgOrigHeight;
	var imgWidth = imgOrigWidth; 
	var scale = 1;
	//aspect ratio is the original jpeg width/height
	var aspectRatio = imgOrigWidth/imgOrigHeight;
	var imgX = 0;
	var imgY = 0;
	
	//get dimensions of browser window
	var windowWidth = $(window).width();
	var windowHeight = $(window).height();
	var windowRatio = windowWidth/windowHeight;
	
	//if the image is a narrower ratio than the window then set the image size by height
	if(aspectRatio<=windowRatio){
		//if the image height is less than the window height then use full image height and postion in the vert and horiz center
		if(imgOrigHeight<=windowHeight){
			imgY = (windowHeight - imgHeight)/2;
		} else{
			//scale the height and width to fit the window
			imgHeight = windowHeight;
			scale = imgHeight/imgOrigHeight;
			imgWidth = imgOrigWidth*scale;
		}
		imgX = (windowWidth - imgWidth)/2;
	} else {
	//if the image is a wider ratio than the window then set the image size by width
	
		//if the image width is less than the window width then use full image width and postion in the vert and horiz center
		if(imgOrigWidth<=windowWidth){
			imgX = (windowWidth - imgWidth)/2;
		} else{
			//scale the width and height to fit the window
			imgWidth = windowWidth;
			scale = imgWidth/imgOrigWidth;
			imgHeight = imgOrigHeight*scale;
		}
		imgY = (windowHeight - imgHeight)/2;
	}

	$("#cabinetImage").css({'width': imgWidth, 'height': imgHeight, 'margin-top': imgY+'px','margin-left': imgX+'px'});
}

/************ Positions Slideshow on page ***********/

function positionSlideshow(){
		var windowHeight = $(window).height();
		var imgY = (windowHeight - imgHeight)/2.25;
		$("#slideshow #images").css({'left':imgX,'top':imgY+'px'});
		var navY = imgY + imgHeight + 25;
		$(".navItem").css({'left':imgX,'top':navY+'px'});
}

/************ Loads next Slideshow Image  ***********/

function loadNextImage(){
	
	//bring next image to the front, hide, swap image and fade in
	$("#slide"+slideNum).css({'z-index': ztop}).hide().attr("src", imageArray[imageIndex]).fadeIn(2000);
	
	//slides alternate between slide1 and slide2 for dissolve
	if(slideNum==1){
		slideNum=2;
	}else{
		slideNum=1;
	}
	
	//send visible image to the back so new image can fade in on top
	$("#slide"+slideNum).css({'z-index': zbottom});
	
	//set the next imageIndex
	if(imageIndex<lastImageIndex){
		imageIndex++;
	}else{
		imageIndex=0;
	}
	
	//preload nextImage
	var nextImage = new Image;
	nextImage.src = imageArray[imageIndex];
	
	//set delay between image dissolves
	setTimeout("loadNextImage()", 4000);
	
}

//function to preload an array of images
function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
				//alert(this);													 
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

/************ Sets the size and position of a Full Height Image  ***********/

function setClotheshorsePage(e){
	 
	var scale = 1;
	//aspect ratio is the original jpeg width/height
	var aspectRatio = imgOrigWidth/imgOrigHeight;
	
	//get dimensions of browser window
	var windowWidth = $(window).width();
	var windowHeight = $(window).height();
	var windowRatio = windowWidth/windowHeight;
	
	//set default image size and position
	var imgHeight = windowHeight;
	imgWidth = windowWidth;
	var imgY = 0;
	var navHeight = 32;
	var chContentHeight = 209;
	var maudeContentHeight = 115;
	
	
	/*if the image is a wider ratio than the window then the image height is set to window height
	and the image width scaled to maintain aspect ratio of the image*/
	if(aspectRatio>windowRatio){
		
		scale = windowHeight/imgOrigHeight;
		imgWidth = imgOrigWidth*scale;
		
		//if the image is right aligned then reposition its x position based on the new window width
		if(imgX<0){
			imgX = 	$(window).width() - imgWidth;
		}
		
	}else //if the image is a narrower ratio then set the image width to the window width and crop the height
	{
		scale = windowWidth/imgOrigWidth;
		imgHeight = imgOrigHeight*scale;

		//position in the vertical center
		imgY = (windowHeight - imgHeight)/2;
		imgX = 0;
	}
	
	$("#fullheightImage").css({'width': imgWidth+'px', 'height': imgHeight+'px','top': imgY+'px', 'left': imgX+'px'});

	
	contentX = .04*imgWidth;
	var chContentY = (.472*imgHeight - navHeight - chContentHeight)/2+navHeight;
	var maudeContentWidth = parseInt($("#clotheshorseContent").css('width'));
	var maudeContentX = .52*imgWidth-chContentY-maudeContentWidth;
	var maudeContentY = (.35343*imgHeight - navHeight - maudeContentHeight)/2+navHeight;
	
	$("#content").css({'padding-left': contentX+'px', 'left': imgX+'px'});
	$("#clotheshorseContent").css({'margin-top': chContentY+'px'});
	$("#maudeContent").css({'margin-top': maudeContentY+'px', 'margin-left': maudeContentX+"px"});
	
}