var PopUpWin = null;
var varChildWindow=null;
var gStartPos, gStartSlide, gSliderMin, gSliderMax, gMinImageScale
var gMaxPrintHeight, gMaxPrintWidth, gMaxImageHeight, gMaxImageWidth //in inches
var gSquareInchPrice
var gStandardImage, gReverseImage
var gImagePath
gStartPos = 0
gStartSlide = 0
gSliderMin = 0
gSliderMax = 100
gMaxPrintHeight = 0
gMaxPrintWidth = 0
gMaxImageHeight = 0
gMaxImageWidth = 0
gMinImageScale = 0
gSquareInchPrice = 0

function SetMaxPrintHeight(MaxPrintHeight){gMaxPrintHeight = MaxPrintHeight;}
function SetMaxPrintWidth(MaxPrintWidth){gMaxPrintWidth = MaxPrintWidth;}
function SetMaxImageHeight(MaxImageHeight){gMaxImageHeight = MaxImageHeight;}
function SetMaxImageWidth(MaxImageWidth){gMaxImageWidth = MaxImageWidth;}
function SetMinImageScale(MinImageScale){gMinImageScale = MinImageScale;}
function SetSquareInchPrice(SquareInchPrice){gSquareInchPrice = SquareInchPrice;}
function SetStandardImage(StandardImage){gStandardImage = StandardImage;}
function SetReverseImage(ReverseImage){gReverseImage = ReverseImage;}
function SetImagePath(Path){gImagePath = Path;}

//*********************************************************************************
function Trim(s) {
var maxchars = 255; // Change number to maximum characters.
if (s.value.length > maxchars)
s.value = s.value.substring(0,maxchars);
}
var textcontrol;
function TrimPaste(s)
{
textcontrol = s
setTimeout(function()
{
var maxchars = 255; // Change number to maximum characters.
if (textcontrol.value.length > maxchars)
textcontrol.value = textcontrol.value.substring(0,maxchars);
}, 50); // 1ms should be enough
}

//****************************************************************************************************
//MOUSE DOWN WHEN THE USER CLICKS ON THE SLIDER IMAGE
function MouseDown(e) {
var evt=window.event || e //evt evaluates to window.event or inexplicit e object, depending on which one is defined

//Disable dragging of image in Firefox
if(evt.preventDefault)
{
evt.preventDefault();
}

gStartPos = parseInt(evt.clientY)
gStartSlide = parseInt(document.getElementById('SliderButton').style.top)
}

//*****************************************************************************
//USER CHANGED THE WIDTH TEXT BOX, UPDATE HEIGHT AND SLIDER
function WidthChange()
{
var NewWidth, ImageScale, NewHeight

NewWidth = parseFloat(document.getElementById('Width').value)
if (isNaN(NewWidth)){NewWidth = 0}

if (NewWidth > gMaxImageWidth){NewWidth = gMaxImageWidth}
ImageScale = NewWidth/gMaxImageWidth

if (ImageScale < gMinImageScale){ImageScale = gMinImageScale}
NewWidth = parseInt(ImageScale * gMaxImageWidth * 10 + 0.5)/10
NewHeight = parseInt(ImageScale * gMaxImageHeight * 10 + 0.5)/10

//Always calculate scale used for pricing by the larger dimension
if (gMaxImageWidth > gMaxImageHeight)
{ImageScale = NewWidth/gMaxImageWidth}
else
{ImageScale = NewHeight/gMaxImageHeight}

UpdateSliderPos(ImageScale)
UpdatePrice(ImageScale)
UpdateHorizontalLabel(NewWidth)
UpdateRotatedLabel(NewHeight)
}

//***********************************************************************************
//USER CHANGED THE HEIGHT TEXT BOX, UPDATE WIDTH AND SLIDER
function HeightChange()
{
var NewWidth, ImageScale, NewHeight

NewHeight = parseFloat(document.getElementById('Height').value)
if (isNaN(NewHeight)){NewHeight = 0}

if (NewHeight > gMaxImageHeight){NewHeight = gMaxImageHeight}
ImageScale = NewHeight/gMaxImageHeight

if (ImageScale < gMinImageScale){ImageScale = gMinImageScale}
NewWidth = parseInt(ImageScale * gMaxImageWidth * 10 + 0.5)/10
NewHeight = parseInt(ImageScale * gMaxImageHeight * 10 + 0.5)/10

//Always calculate scale used for pricing by the larger dimension
if (gMaxImageWidth > gMaxImageHeight)
{ImageScale = NewWidth/gMaxImageWidth}
else
{ImageScale = NewHeight/gMaxImageHeight}

UpdateSliderPos(ImageScale)
UpdatePrice(ImageScale)
UpdateHorizontalLabel(NewWidth)
UpdateRotatedLabel(NewHeight)
}

//*************************************************************************************
//UPDATE PRICE BASED ON THE PERCENT IMAGE IS OF MAXIMUM
function UpdatePrice(ImageScale)
{
var NewPrintWidth, NewPrintHeight, Price

NewPrintWidth = gMaxPrintWidth * ImageScale + 0.2 //add 0.1 margin on each side of image
NewPrintHeight = gMaxPrintHeight * ImageScale + 0.2 //add 0.1 margin on each side of image

Price = parseInt(NewPrintWidth + 1) * parseInt(NewPrintHeight + 1) * gSquareInchPrice
document.getElementById('Price').innerHTML = 'Price $' + Price.toFixed(2) //+ "<font size='-1'><br>Print Width: " + NewPrintWidth.toFixed(2) + "<BR>Print Height: " + NewPrintHeight.toFixed(2) + "</font>"

//document.getElementById('OtherInfo').innerHTML = document.getElementById('Width').offsetWidth
}

//******************************************************************************************
//UPDATE THE SIZE LABELS AND PRICE BASED ON SLIDER POSITION
function SliderChange(e) {
var CurrentPos, NewSlide, Percent, NewWidth, NewHeight, NewPrintWidth, NewPrintHeight, Price, ImageScale

if (gStartPos != 0)
{
var evt=window.event || e //evt evaluates to window.event or inexplicit e object, depending on which one is defined
CurrentPos = parseInt(evt.clientY)

NewSlide = gSliderMax - (gStartSlide + CurrentPos - gStartPos)

if (NewSlide > gSliderMax){NewSlide = gSliderMax}
if (NewSlide < gSliderMin){NewSlide = gSliderMin}

Percent = NewSlide / gSliderMax
document.getElementById('SliderButton').style.top = (gSliderMax - NewSlide) + "px"

NewWidth = ((gMaxImageWidth * (1 - gMinImageScale)) * Percent + (gMaxImageWidth * gMinImageScale))
NewHeight = ((gMaxImageHeight * (1 - gMinImageScale)) * Percent + (gMaxImageHeight * gMinImageScale))

NewWidth = parseInt(NewWidth * 10 + .5)/10
NewHeight = parseInt(NewHeight * 10 + .5)/10

//Always calculate scale used for pricing by the larger dimension
if (gMaxImageWidth > gMaxImageHeight)
{ImageScale = NewWidth/gMaxImageWidth}
else
{ImageScale = NewHeight/gMaxImageHeight}
UpdatePrice(ImageScale)

UpdateHorizontalLabel(NewWidth)
UpdateRotatedLabel(NewHeight)
}
}

//********************************************************************************************
function UpdateSliderPos(ImageScale)
{//ImageScale is the percent of image size so we need to account for the MinImageScale being 0% of the slider pos
var NewSlide, Percent

if (1 - gMinImageScale != 0){
Percent = (ImageScale - gMinImageScale)/(1 - gMinImageScale)
NewSlide = gSliderMax * Percent
document.getElementById('SliderButton').style.top = (gSliderMax - NewSlide) + "px"
}
}

//HANDLE MOUSE UP, RESET FLAG
function MouseUp(){
gStartPos = 0
}

//*******************************************************************************************
function GetDigitSize(Digit)
{
if (Digit == 1 || Digit == 8)
{return 7}
else if (Digit == 0 || Digit == 6)
{return 9}
else
{return 8}
}

//******************************************************************************************
//UPDATE THE HORIZONTAL IMAGE SIZE USING IMAGES INSTEAD OF TEXT
function UpdateHorizontalLabel(Size)
{
var Digit
var LineLength
var NumberLength
var NumberImageString

document.getElementById('Width').value = Size
//return;

NumberLength = 20 + 13 + 3 //all static widths, 10 for each arrow, 13 of 'in' and 3 for '.'

Size = Size * 10
//'in' label
NumberImageString = "<img src='" + gImagePath + "Numbers/Hin.gif' width='13' height='13'>"

//tenths digit
Digit = Size % 10
NumberImageString = "<img src='" + gImagePath + "Numbers/H" + Digit + ".gif' height='13'>" + NumberImageString
NumberLength = NumberLength + GetDigitSize(Digit)

//'.' image
NumberImageString = "<img src='" + gImagePath + "Numbers/Hperiod.gif' width='3' height='13'>" + NumberImageString

//ones digit
Size = parseInt(Size/10)
Digit = Size % 10
NumberImageString = "<img src='" + gImagePath + "Numbers/H" + Digit + ".gif' height='13'>" + NumberImageString
NumberLength = NumberLength + GetDigitSize(Digit)

//tens digit
Size = parseInt(Size/10)
if (Size > 0){
Digit = Size % 10
NumberImageString = "<img src='" + gImagePath + "Numbers/H" + Digit + ".gif' height='13'>" + NumberImageString
NumberLength = NumberLength + GetDigitSize(Digit)
}

//hundreds digit
Size = parseInt(Size/10)
if (Size > 0){
Digit = Size % 10
NumberImageString = "<img src='" + gImagePath + "Numbers/H" + Digit + ".gif' height='13'>" + NumberImageString
NumberLength = NumberLength + GetDigitSize(Digit)
}


LineLength = parseInt(gMaxImageWidth * 5) + 2 //5 pixels per inch
LineLength = LineLength - NumberLength

if (LineLength >2)
{
document.getElementById('WidthLabel').innerHTML = "<img src='" + gImagePath + "DimArrowLeft.gif' width='10' height='11'><img src='" + gImagePath + "DimLineHorz.gif' height='11' width='" + parseInt(LineLength/2+.5) + "'>" + NumberImageString + "<img src='" + gImagePath + "DimLineHorz.gif' height='11' width='" + parseInt(LineLength/2) + "'><img src='" + gImagePath + "DimArrowRight.gif' width='10' height='11'>"
}
else
{
LineLength = parseInt(gMaxImageWidth * 5) + 2 - 20 //5 pixels per inch
document.getElementById('WidthLabel').innerHTML = "<DIV>" + NumberImageString + "</DIV><img src='" + gImagePath + "DimArrowLeft.gif' width='10' height='11'><img src='" + gImagePath + "DimLineHorz.gif' height='11' width='" + parseInt(LineLength) + "'><img src='" + gImagePath + "DimArrowRight.gif' width='10' height='11'>"
}
}

//*****************************************************************************************************************************
//UPDATE THE ROTATED IMAGE SIZE USING IMAGES INSTEAD OF TEXT
function UpdateRotatedLabel(Size)
{
var Digit
var LineLength
var NumberLength
var NumberImageString

document.getElementById('Height').value = Size
//return;

NumberLength = 20 + 13 + 3 //all static widths, 10 for each arrow, 13 of 'in' and 3 for '.'

Size = Size * 10

//'in' label
NumberImageString = "<img src='" + gImagePath + "Numbers/Rin.gif' width='13' height='13'><BR>"

//number after decimal
Digit = Size % 10
NumberImageString = "<img src='" + gImagePath + "Numbers/R" + Digit + ".gif' width='13'><BR>" + NumberImageString
NumberLength = NumberLength + GetDigitSize(Digit)

//period
NumberImageString = "<img src='" + gImagePath + "Numbers/Rperiod.gif' width='13' height='3'><BR>" + NumberImageString

//ones position
Size = parseInt(Size/10)
Digit = Size % 10
NumberImageString = "<img src='" + gImagePath + "Numbers/R" + Digit + ".gif' width='13'><BR>" + NumberImageString
NumberLength = NumberLength + GetDigitSize(Digit)

//tens position
Size = parseInt(Size/10)
if (Size > 0){
Digit = Size % 10
NumberImageString = "<img src='" + gImagePath + "Numbers/R" + Digit + ".gif' width='13'><BR>" + NumberImageString
NumberLength = NumberLength + GetDigitSize(Digit)
}

//hundreds position
Size = parseInt(Size/10)
if (Size > 0){
Digit = Size % 10
NumberImageString = "<img src='" + gImagePath + "Numbers/R" + Digit + ".gif' width='13'><BR>" + NumberImageString
NumberLength = NumberLength + GetDigitSize(Digit)
}

LineLength = parseInt(gMaxImageHeight * 5) //5 pixels per inch
LineLength = LineLength - NumberLength
if (LineLength > 2)
{
document.getElementById('HeightLabel').innerHTML = "<img src='" + gImagePath + "DimArrowUp.gif' width='13' height='10'><BR><img src='" + gImagePath + "DimLineVert.gif' width='13' height='" + parseInt(LineLength/2+.5) + "'><BR>" + NumberImageString + "<img src='" + gImagePath + "DimLineVert.gif' width='13' height='" + parseInt(LineLength/2) + "'><BR><img src='" + gImagePath + "DimArrowDown.gif' width='13' height='10'>"
}
else
{
LineLength = parseInt(gMaxImageHeight * 5) - 20 //5 pixels per inch
document.getElementById('HeightLabel').innerHTML = "<TABLE><TR><TD><img src='" + gImagePath + "DimArrowUp.gif' width='13' height='10'><BR><img src='" + gImagePath + "DimLineVert.gif' width='13' height='" + parseInt(LineLength) + "'><BR><img src='" + gImagePath + "DimArrowDown.gif' width='13' height='10'></TD><TD>" + NumberImageString + "</TD></TR></TABLE>"
}
}

//************************************************************************************************************
function UpdateReverseImage()
{
if (document.getElementById('ReverseImage').checked == true)
{
document.getElementById('SampleImage').src = gReverseImage
}
else
{
document.getElementById('SampleImage').src = gStandardImage
}
}