<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    // handles the click event for link 1, sends the query
function getOutput() {
    var model = document.getElementById('model').value;
    var carrier = document.getElementById('carrier').value;
    var condition = document.getElementById('condition').value;
    var storage = document.getElementById('storage').value;
	if(model == '' || carrier == '' || condition == '' || storage == ''){
	    var container = document.getElementById('output');
	    container.innerHTML = '<h3>Please fill out all of the form fields</h3>';
		$('#outputcont').show(300);
	}else{
  	  getRequest(
      	'quotest/PHPExcel/getQuote.php?model=' + model + "&condition=" + condition + '&storage=' + storage + '&carrier=' + carrier , // URL for the PHP file
       	drawOutput,  // handle successful request
       	drawError    // handle error
  	);
	}
  return false;
}
// handles drawing an error message
function drawError() {
    var container = document.getElementById('output');
    container.innerHTML = 'Please try again later or contact us at info@computeroverhauls.com';
}
// handles the response, adds the html
function drawOutput(responseText) {
	$('#outputcont').show(300);
    var container = document.getElementById('output');
    container.innerHTML = responseText;
}
// helper function for cross-browser request object
function getRequest(url, success, error) {
    var req = false;
    try{
        // most browsers
        req = new XMLHttpRequest();
    } catch (e){
        // IE
        try{
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            // try an older version
            try{
                req = new ActiveXObject("Microsoft.XMLHTTP");
           } catch(e) {
                return false;
        }
    }
}
    if (!req) return false;
    if (typeof success != 'function') success = function () {};
    if (typeof error!= 'function') error = function () {};
    req.onreadystatechange = function(){
        if(req.readyState == 4) {
            return req.status === 200 ?
                success(req.responseText) : error(req.status);
        }
    }
    req.open("GET", url, true);
    req.send('');
    return req;
}
$(document).ready(function(){
    $("#1").hide(); //Hides all the capacity fields
    $("#2").hide();
    $("#3").hide();
    $("#4").hide();
    $("#5").hide();
    $('#model').change(function(e){
        if($(this).val() == "ip7p"){ //Only show the right capacity field for the right model, hide all others
			$('#storage').val($('256GB'));
            $("#1").show();
            $("#2").show();
            $("#3").hide();
            $("#4").show();
            $("#5").hide();
        }
		if($(this).val() == "ip7"){
			$('#storage').val($('256GB'));
            $("#1").show();
            $("#2").show();
            $("#3").hide();
            $("#4").show();
            $("#5").hide();
		}
        if($(this).val() == "ip6sp"){
			$('#storage').val($('128GB'));
            $("#1").hide();
            $("#2").show();
            $("#3").show();
            $("#4").show();
            $("#5").show();
        }
        if($(this).val() == "ip6s"){
			$('#storage').val($('128GB'));
            $("#1").hide();
            $("#2").show();
            $("#3").show();
            $("#4").show();
            $("#5").show();
        }
        if($(this).val() == "ipse"){
			$('#storage').val($('128GB'));
            $("#1").hide();
            $("#2").show();
            $("#3").show();
            $("#4").show();
            $("#5").show();
        }
        if($(this).val() == "ip6p"){
			$('#storage').val($('128GB'));
            $("#1").hide();
            $("#2").show();
            $("#3").show();
            $("#4").hide();
            $("#5").show();
        }
        if($(this).val() == "ip6"){
			$('#storage').val($('128GB'));
            $("#1").hide();
            $("#2").show();
            $("#3").show();
            $("#4").hide();
            $("#5").show();
        }
    });
    $('#model').on('change', function() { //Removes the placeholder after anything has been selected
      if ( this.value !== 'none')       //Also fades in the next dropdown
      {
        $("#modelplaceholder").hide();
        $("#storage").show(300);
        $("#storageHeader").show(300);
      }
    });
    $('#storage').on('change', function() {
      if ( this.value !== 'none')
      {
        $("#carrier").show(300);
        $("#carrierHeader").show(300);
        $("#storageplaceholder").hide();
      }
    });
    $('#carrier').on('change', function() {
      if ( this.value !== 'none')
      {
        $("#condition").show(300);
        $("#conditionHeader").show(300);
        $("#carrierplaceholder").hide();
      }
    });
    $('#condition').on('change', function() {
      if (this.value !== 'none')
      {
        var cond = '#' + $(this).val().toLowerCase();
        $(".blurb:not(" + cond +")").hide(300, function(){
            $(cond).show(300);
        });
        $(".btn").fadeIn(300);
        $("#conditionplaceholder").hide();
      }else{
          $(cond).show(300);
      }

    });
      $("#ip7p").click(function () {
        if($('#model').val() == 'none'){
        $('#model').val('ip7p');
        $('#model').change();
        $(".modelscont").fadeOut(300);
        $(this).fadeIn(300);
        }else{
            $(this).fadeOut(function(){
                $('.modelscont').fadeIn(300);
                $('#model').val('none');
            });
        }
      });
      $("#ip7").click(function () {
        if($('#model').val() == 'none'){
        $('#model').val('ip7');
        $('#model').change();
        $(".modelscont").fadeOut(300);
        $(this).fadeIn(300);
        }else{
            $(this).fadeOut(function(){
                $('.modelscont').fadeIn(300);
                $('#model').val('none');
            });
        }
      });
      $("#ip6sp").click(function () {
        if($('#model').val() == 'none'){
        $('#model').val('ip6sp');
        $('#model').change();
        $(".modelscont").fadeOut(300);
        $(this).fadeIn(300);
        }else{
            $(this).fadeOut(function(){
                $('.modelscont').fadeIn(300);
                $('#model').val('none');
            });
        }
      });
      $("#ip6s").click(function () {
        if($('#model').val() == 'none'){
        $('#model').val('ip6s');
        $('#model').change();
        $(".modelscont").fadeOut(300);
        $(this).fadeIn(300);
        }else{
            $(this).fadeOut(function(){
                $('.modelscont').fadeIn(300);
                $('#model').val('none');
            });
        }
      });
      $("#ipse").click(function () {
        if($('#model').val() == 'none'){
        $('#model').val('ipse');
        $('#model').change();
        $(".modelscont").fadeOut(300);
        $(this).fadeIn(300);
        }else{
            $(this).fadeOut(function(){
                $('.modelscont').fadeIn(300);
                $('#model').val('none');
            });
        }
      });
      $("#ip6p").click(function () {
        if($('#model').val() == 'none'){
        $('#model').val('ip6p');
        $('#model').change();
        $(".modelscont").fadeOut(300);
        $(this).fadeIn(300);
        }else{
            $(this).fadeOut(function(){
                $('.modelscont').fadeIn(300);
                $('#model').val('none');
            });
        }
      });
      $("#ip6").click(function () {
        if($('#model').val() == 'none'){
        $('#model').val('ip6');
        $('#model').change();
        $(".modelscont").fadeOut(300);
        $(this).fadeIn(300);
        }else{
            $(this).fadeOut(function(){
                $('.modelscont').fadeIn(300);
                $('#model').val('none');
            });
        }
      });

});
$(window).on('resize', function(){
      if ($(this).width() < 800) {
          $('#model').show();
          $('.modelscont').hide();
      }else if($('#model').val() == 'none'){
          $('#model').hide();
          $('.modelscont').show();
      }
});

</script>
	<!-- Google Code for Add to Cart Conversion Page
	In your html page, add the snippet and call goog_report_conversion
	when someone clicks on the chosen link or button. -->

<style>
    #model{
        display:none;
    }
	#jumbotron{
		font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
	}
	.itemcont {
	   display: flex;
       overflow: hidden;
       margin:15px;
       align-items: center;
	}
    .itemheader{
        margin-right: auto;
    }
    .modelscont{
        display:inline-block;
        background-color:white;
        border-radius:5px;
        padding:20px 20px 0px 20px;
        transition:background-color .25s, color .25s;
        user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
        cursor:hand;
        margin-bottom:20px;
        border:solid #a5a5a5 1px;
    }
	#outputcont{
		display:none;
		margin:20px;
	}
	#output{
		font-size:3em;
		margin:20px;
	}
    .modelscont:hover {
        background-color:rgba(121, 169, 128, 1);
    }
    .modelscont:active{
        background-color:rgba(20, 20, 20, 0.73);
        color:#e2e2e2;
    }
    .models{
        height:75px;
        width:75px;
    }
    #model{
        margin:0 auto;
    }
    #output{
        margin-top:50px;
    }
.btn {
    display:none;
	background-color:#44c767;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:10px;
	border:1px solid #18ab29;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
	outline:none;
}
.btn:hover {
	background-color:#5cbf2a;
}
.btn:active {
    background-color:#169c23;
    position:relative;
    top:1px;
}
#jumbotron {
    width:100%;
    margin:0 auto;
    text-align:center;
    padding:20px 0 20px 0;
    border-radius:3px;
}
#5  {
    display:none;
}
#items{
    width:45%;
    margin:0 auto;
}

select {
    border: 1px solid #ccc;
    border-radius: 3px;
    overflow: hidden;
    background: #fafafa ;
    display:inline-block;
    width:100px;
}

select option {
    padding: 5px 8px;
    width: 130%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
}

select select:focus {
    outline: none;
}
#output{
    transition:all .25s;
}
#output p{
    margin:0 auto;
    width:100%;
	font-size:.4em;
	line-height:1em;
	text-align:left;
}
.blurb{
    display:none;
    margin:15px;
    text-align:left;
    border:solid gray 2px;
    padding:10px;
}
#output h1              { font-size: 2em; margin: .67em 0;line-height:1em;}
#output h2              { font-size: .8em; margin: .75em 0;line-height:1em;}
#output h3              { font-size: .6em; margin: .83em 0;line-height:1em;}
h4              { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
#output ul {
	list-style-type:circle;
}
#output ul li{
	display:list-item;
	list-style:circle;
    margin:0 auto;
	font-size:.4em;
	line-height:1em;
	text-align:center;
}
#listcont{
	width:50%;
	margin:0 auto;
}
#mainhead{
	font-size:1.5em;
	margin-bottom:15px;
}
</style>