<div id="divcalculator">
	<div id="calculatortitle" style="color: #691315; font-size: 24px; font-weight: bold; height: 60px; padding-top: 20px; margin-bottom: 15px;">
		PLEASE ENTER YOUR INFORMATION BELOW TO<br />
		DETERMINE YOUR POTENTIAL SAVINGS WITH TLI</div>
	<div id="truck" style="width: 750px; height: 220px;color: #691315; position: absolute; pointer-events: none; ">
		<img id="imgtruck" src="/images/truck.png" /></div>
	<div id="truckcontent1" style=" padding-top: 10px;height: 150px;z-index:-1;">
		<div style="border: solid 1px transparent; height: 70px;">
			<div style="color: #691315; font-size: 20px; padding: 20px; width: 280px;border: solid 0px red; float: left;">
				What&#39;s your annual revenue?</div>
			<div class="nebo" style="color: #691315; border: solid 0px red; width: 150px; height: 40px; margin-left: 320px;margin-top: 15px;">
				<div style="font-size: 28px; color: grey; margin-left: -22px; margin-top: 5px; float: left; text-align: right; ">
					$</div>
				<input id="inputrevenue" style="display: inline; width: 95%; height: 100%; margin:0; padding: 0; font-size: 28px; color: black; text-align: right;" value="" /></div>
		</div>
		<div style="border: solid 1px transparent;height: 70px;">
			<div style="color: #691315; font-size: 20px; padding: 0px; padding-left: 20px; width: 300px;border: solid 0px red; float: left;">
				What percentage of revenue<br />
				is your transportation cost?</div>
			<div class="nebo" style="color: #691315; border: solid 0px red; width: 150px; height: 40px; margin-left: 320px;margin-top: 5px;">
				<input id="inputpercentage" style="display: inline; float: left; width: 95%; height: 100%; margin:0; padding: 0; font-size: 28px; color: black; text-align: right;" value="5" />
				<div style="font-size: 28px; color: grey;  padding-top: 5px; margin-left: 155px; text-align: left; ">
					%</div>
			</div>
			<div style="font-size: 10px; font-style: italic; color: grey; margin-top: 5px;padding-left: 15px;">
				We entered 5% based on industry averages, but feel free to enter your own percentage</div>
		</div>
	</div>
	<div id="calculatorbuttons1" style="margin-top: 50px;">
		<div color="#999999" direction="135," filter:="" id="btncalculate" strength="4," style="border: solid 1px black; margin-top: 80px; width: 200px; float: right; margin-right: -25px; text-align: center; color: white; background:#691315; padding: 5px; font-size: 14px; 
				-moz-box-shadow: 3px 3px 4px #999;
				-webkit-box-shadow: 3px 3px 4px #999;
				box-shadow: 3px 3px 4px #999;
				-ms-filter: ">
			<div style="font-weight: bold; font-size: 24px;letter-spacing: 2.5px;">
				CLICK HERE</div>
			<div style="letter-spacing: 0.25px;">
				to calculate your potential</div>
			savings with Translogistics</div>
		<div style="border: solid 0px black; margin-top: 188px; width: 340px; float: left;  font-size: 13px; color: grey; font-style: italic;">
			Savings calculated with the calculator are estimates only</div>
	</div>
	<div id="truckcontent2" style="color: #691315; font-size: 22px; height: 150px; padding-top: 10px; text-align: center; width: 520px; display: none;">
		<div style="padding-top: 20px;">
			You could be saving as much as</div>
		<div id="calcresult" style="font-weight: bold; font-size: 46px; color: black; padding: 5px;">
			$</div>
		<div>
			each year with Translogistics</div>
	</div>
	<div id="calculatorbuttons2" style="display:none; margin-top: 50px; ">
		<div style="margin-top: 80px; width: 230px; margin-right: -25px;float: right; ">
			<div color="#999999" direction="135," filter:="" id="btnfreeaudit" strength="4," style="border: solid 1px black;   text-align: center; color: white; background:#691315; padding: 5px; font-size: 14px; height:65px;
					-moz-box-shadow: 3px 3px 4px #999;
					-webkit-box-shadow: 3px 3px 4px #999;
					box-shadow: 3px 3px 4px #999;
					-ms-filter: ">
				<div style="font-weight: bold; font-size: 24px;letter-spacing: 2.5px;">
					CLICK HERE</div>
				<div style="letter-spacing: 0px;">
					to receive a <strong>FREE</strong> Freight Audit</div>
				<div style="letter-spacing: 0px;">
					and Optimization Analysis</div>
			</div>
			<div class="phonenumber" style="color: #691315; font-size: 15px; text-align: center; margin-top: 5px;">
				<span style="font-size: 12px;"><em>Contact us today at</em></span>&nbsp;&nbsp;&nbsp;<strong>888.983.3012</strong></div>
		</div>
		<div color="#999999" direction="135," filter:="" id="btnrecalculate" strength="4," style="border: solid 1px black; margin-top: 80px; width: 200px; float: left; margin-right: 50px; text-align: center; color: white; background:#691315; padding: 5px; font-size: 14px; 
				-moz-box-shadow: 3px 3px 4px #999;
				-webkit-box-shadow: 3px 3px 4px #999;
				box-shadow: 3px 3px 4px #999;
				-ms-filter: ">
			Recalculate</div>
		<div style="border: solid 0px black; margin-top: 80px; width: 340px; float: left;  font-size: 13px; color: grey; font-style: italic;">
			Savings calculated with the calculator are estimates only</div>
	</div>
</div>
<script src="/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script><script src="/Scripts/jquery.numeric.js" type="text/javascript"></script><script src="/Scripts/jshashtable-2.1.js" type="text/javascript"></script><script src="/Scripts/jquery.numberformatter-1.2.1.jsmin.js" type="text/javascript"></script><script type="text/javascript">
  $(document).ready(function() {
    if ($.browser.msie && $.browser.version == "7.0") {
      $(".nebo").css("margin-left", "0px");
    }


    $("#imgtruck").click(function(event){
        if (event.pageX >= $("#inputrevenue").offset().left && event.pageX <= $("#inputrevenue").offset().left + $("#inputrevenue").width()) {
        	if (event.pageY >= $("#inputrevenue").offset().top && event.pageY <= $("#inputrevenue").offset().top + $("#inputrevenue").height()) {
        		$("#inputrevenue").focus();
        	}
        }
        if (event.pageX >= $("#inputpercentage").offset().left && event.pageX <= $("#inputpercentage").offset().left + $("#inputpercentage").width()) {
        	if (event.pageY >= $("#inputpercentage").offset().top && event.pageY <= $("#inputpercentage").offset().top + $("#inputpercentage").height()) {
        		$("#inputpercentage").focus();
        	}
        }
	});
	  
    $("#btncalculate").css("cursor", "pointer");
    $("#btnrecalculate").css("cursor", "pointer");
    $("#btnfreeaudit").css("cursor", "pointer");
    $("#btnfreeaudit").click(function(){open("http://www.translogisticsinc.com/optimization_analysis")});

    $("#inputrevenue").parseNumber({format:"#,###", locale:"us"});
    $("#inputrevenue").formatNumber({format:"#,###", locale:"us"});    
    $("#inputpercentage").numeric(".");
    $("#inputrevenue").numeric();
    $("#inputrevenue").blur(function() {
      $(this).parseNumber({format:"#,###", locale:"us"});
      $(this).formatNumber({format:"#,###", locale:"us"});
    });

    $("#btncalculate").click(function() {
      $("#calculatortitle").html("Great News!").css("font-size", "42px");
      $("#truckcontent1").hide();
      $("#truckcontent2").fadeIn();
      $("#calculatorbuttons1").hide();
      $("#calculatorbuttons2").fadeIn();
      $("#truck").animate({marginLeft: 750, width: 0}, {queue: true,duration: 500}).animate({opacity: 0, marginLeft: 0, width: 750}, {queue: true,duration: 0}).animate({opacity: 1, filter: ""}, {queue: true,duration: 300});

      var revenue = $("#inputrevenue").parseNumber({format:"#,###", locale:"us"});
      var percent = parseFloat($("#inputpercentage").val())/100;
      var result = 0;
      if (revenue >= 20000000) 
        result = percent*revenue*0.16;
      else
        result = percent*revenue*0.182;
      var divResult = $("#calcresult").html("$" + $.formatNumber(result, {format:"#,###", locale:"us"}));
    });
    $("#btnrecalculate").click(function() {
        $("#calculatortitle").html("PLEASE ENTER YOUR INFORMATION BELOW TO<br/\>DETERMINE YOUR POTENTIAL SAVINGS WITH TLI").css("font-size", "24px");
        $("#truckcontent1").fadeOut(150).fadeIn(150);
        $("#truckcontent2").hide();
        $("#calculatorbuttons1").fadeOut(150).fadeIn(150);
        $("#calculatorbuttons2").hide();
        //$("#truck").fadeOut(10).fadeIn(10);
        $("#truck").animate({opacity: 0, filter: ""}, 100).animate({opacity: 1, filter: ""}, 100);
        $("#inputrevenue").parseNumber({format:"#,###", locale:"us"});
        $("#inputrevenue").formatNumber({format:"#,###", locale:"us"});
    });
  });
</script>