var numberOfPagesInput = document.getElementById("number-of-pages");
var increaseImg = document.getElementById("increase");
var decreaseImg = document.getElementById("decrease");
var resultSpan = document.getElementById("pricing-results");
var pricingForm = document.getElementById("pricing-form");
var boxContainer = document.getElementById("select-date");
boxContainer.style.cssText = "position:relative;z-index:100;width:220px;height:12px;margin:0 0 -12px 0;float:left;";

numberOfPagesInput.value = 1;

function increasePages()
{
if (numberOfPagesInput.value < 30)
{
numberOfPagesInput.value++;
if (numberOfPagesInput.value == 1)
{
resultSpan.innerHTML = "<del>$150</del> $75";
}
else if (numberOfPagesInput.value == 2)
{
resultSpan.innerHTML = "<del>$300</del> $150";
}
else {
resultSpan.innerHTML = "<del>$" + (300 + (75 * (numberOfPagesInput.value - 2))) + "</del>" + "$" + (150 + (45 * (numberOfPagesInput.value - 2)));
}
}
return false;
}

function decreasePages()
{
if (numberOfPagesInput.value > 1)
{
numberOfPagesInput.value--;
if (numberOfPagesInput.value == 1)
{
resultSpan.innerHTML = "<del>$150</del> $75";
}
else if (numberOfPagesInput.value == 2)
{
resultSpan.innerHTML = "<del>$300</del> $150";
}
else {
resultSpan.innerHTML = "<del>$" + (300 + (75 * (numberOfPagesInput.value - 2))) + "</del>" + "$" + (150 + (45 * (numberOfPagesInput.value - 2)));
}
}
return false;
}

function showNumbersBox() {

boxContainer.style.display = "block";

function changeColorOnMouseOver() {

this.style.color = "#aa6e58";

}

function changeColorOnMouseOut() {

this.style.color = "#dcdbdb";

}

function updatePricing() {

var selectedNumberOfPages = parseFloat(this.innerHTML);

if (selectedNumberOfPages == 1)
{
resultSpan.innerHTML = "<del>$150</del> $75";
}
else if (selectedNumberOfPages == 2)
{
resultSpan.innerHTML = "<del>$300</del> $150";
}
else {
resultSpan.innerHTML = "<del>$" + (300 + (75 * (selectedNumberOfPages - 2))) + "</del>" + "$" + (150 + (45 * (selectedNumberOfPages - 2)));
}

numberOfPagesInput.value = selectedNumberOfPages;

}

function closeNumbersBox() {
boxContainer.style.display = "none";
}

var closeBoxContainer = document.createElement("img");
closeBoxContainer.src = "images/close-numbers-box.jpg";
closeBoxContainer.style.cssText = "position:absolute;top:20px;right:104px;cursor:pointer;";

closeBoxContainer.onclick = closeNumbersBox;

boxContainer.appendChild(closeBoxContainer);

var boxContainer2 = document.createElement("div");
boxContainer2.style.cssText="background:#aa6e58;width:114px;padding:2px 1px 1px 2px;position:absolute;top:35px;left:90px;";

for (var i=1; i<=30; i++)
{
var individualNumberBox = document.createElement("div");
individualNumberBox.style.cssText = "z-index:100;font:normal 10px arial;float:left;height:16px;width:18px;text-align:center;background:#313131;color:#fff;margin-right:1px;border-bottom:1px solid #aa6e58;padding-top:2px;cursor:pointer;color:#dcdbdb;";

var exactNumber = document.createTextNode(i);

individualNumberBox.appendChild(exactNumber);

individualNumberBox.onmouseover = changeColorOnMouseOver;
individualNumberBox.onmouseout = changeColorOnMouseOut;
individualNumberBox.onclick = updatePricing;

boxContainer2.appendChild(individualNumberBox);
}

boxContainer.appendChild(boxContainer2);

}

increaseImg.onclick = increasePages;
decreaseImg.onclick = decreasePages;
numberOfPagesInput.onclick = showNumbersBox;