{{#*inline "unitVideo"~}}
    {{#if (length videos)}}
        <a id="video"></a>
        <div class="video-frame">
            <lite-youtube videoid="{{videos.0.youtubeVideoId}}"></lite-youtube>
        </div>
    {{/if}}
{{~/inline}}

{{#with unit}}

<div class="g-grid">
    <div class="g-block size-100">
        {{#breadcrumbs .}}
            <div class="smtxt up" style="margin:12px 0 24px 2px">
            {{#each .}}
            <b><a href="{{url}}">{{caption}}</a></b> {{#if (lt (increment @index) (length ..))}} / {{/if}}
            {{/each}}
            </div>
        {{/breadcrumbs}}
    </div>
</div>

<div id="inv-specsheet">

    <div id="spec-main-title-holder">
        <div class="spec-main-title">{{year}} {{make}} {{model}}</div>
        <div id="close-button">{{#backToListings}}<i style="color:#212C65" class="fas fa-times"></i>{{/backToListings}}</div>
        <!--
        <div id="sharesection">
            Share
            <a href="http://www.facebook.com/sharer.php?u=http://web.trucksystem.com/inventory/SpecSheet_res/default.aspx?ID={{id}}&amp;title={{year}} {{make}} {{model}}" id="share_facebook" target="_blank" title="Share on Facebook"><span class="socicon-facebook"></span></a>
            <a href="https://twitter.com/share?url=http://web.trucksystem.com/inventory/specsheet_res/?ID={{id}}&amp;text={{year}}%{{make}}%20{{model}}" id="share_twitter" target="_blank" title="Share on Twitter"><span class="socicon-twitter"></span></a>
            <a href="javascript:emailFriend('{{year}} {{make}} {{model}}', 'http://web.trucksystem.com/inventory/SpecSheet_res/default.aspx?ID={{id}}')" id="share_email" title="Share by Email"><span class="socicon-mail"></span></a>    
            <p></p>
        </div>
        -->
    </div>    

    <div oncontextmenu="return false;"  id="spec-photos">
        <div id="spec-mainphoto">
            {{#if primaryPhoto}}
                <img src="{{primaryPhoto.large}}" alt="{{year}} {{make}} {{model}}">
            {{else}}
                <!-- Handle the Nophoto here -->
            {{/if}}
            <div id="loading-image"><div id="loading-image-holder">
                <!-- <img id="spinny-thing" src="images/spinny-thing.svg" /><br /> -->
                Loading...</div></div>
        </div>

        <div id="spec-subphotos-left">
            <img class="disableSave" src="https://integrations.soarr.com/davesyverson/images/left.svg" style="width: 20px; height: 90px;" alt="-" >
        </div>
        <div id="spec-subphotos">
            <div id="spec-subphotos-holder">
            {{#each photos}}
                <div class="spec-subphotos-photo" data-largeimage="{{large}}">
                <img src="{{small}}" alt="{{year}} {{make}} {{model}}" />
                </div>
            {{/each}}
            </div>
        </div>
        <div id="spec-subphotos-right">
            <img class="disableSave" src="https://integrations.soarr.com/davesyverson/images/right.svg" style="width: 20px; height: 90px;" alt="-" >
        </div>

    </div>

    <div id="spec-overview">
        <div class="spec-group-holder add-bottom-border">
            <div id="spec-dealer-address">                
                <span id="spec-dealer-name">{{dealer.name}}</span><br />
                {{dealer.address}}<br />
                {{dealer.city}}, {{dealer.state}} {{dealer.zip}}<br />
                <span id="spec-dealer-phone">{{dealer.phone}}</span>
            </div>
            <div id="spec-price">{{formatCurrency pricing.asking "Call for Price"}}<div class="spec-getfinancing"><a href="https://app.dcrportal.com/?vendorGUID=4354359e-0ef0-eb11-813b-066ef92796c9&price={{pricing.asking}}&equipmentDescription={{year}} {{make}} {{model}}"  target="_blank">Get Financing</a></div></div>
        </div>
        <div class="spec-group-holder">
            <div class="spec-simple-table">
                <div class="spec-simple-table-row">
                    <div class="spec-simple-table-label">
                        Make
                    </div>
                    <div class="spec-simple-table-data">
                        {{make}}
                    </div>
                </div>
                <div class="spec-simple-table-row">
                    <div class="spec-simple-table-label">
                        Model
                    </div>
                    <div class="spec-simple-table-data">
                        {{model}}
                    </div>
                </div>
                <div class="spec-simple-table-row">
                    <div class="spec-simple-table-label">
                        Year
                    </div>
                    <div class="spec-simple-table-data">
                        {{year}}  
                    </div>
                </div>
                <div class="spec-simple-table-row">
                    <div class="spec-simple-table-label">
                        Mileage
                    </div>
                    <div class="spec-simple-table-data">
                        {{odometer.reading}} {{odometer.unit}}
                    </div>
                </div>
                <div class="spec-simple-table-row">
                    <div class="spec-simple-table-label">
                        Unit No.
                    </div>
                    <div class="spec-simple-table-data">
                        {{stockNumber}}
                    </div>
                </div>
            </div>
        </div>

        <div id="spec-action-buttons">
            <!--
            <div class="spec-action-buttons-link50 spec-action-button-left">
                <a data-fancybox data-type="iframe" data-src="/forms/RequestAQuoteFBox.aspx?DealershipID=999&amp;subject=Unit Inquiry - {{year}} {{make}} {{model}}  - Unit {{stockNumber}}"  href="javascript:;">Request A Quote</a>
            </div>
            <div class="spec-action-buttons-link50 spec-action-button-right">
                <a data-fancybox data-type="iframe" data-src="#"  href="javascript:;">Get Financing</a>
            </div>
            -->
            <div class="spec-action-buttons-link100">
                <a data-fancybox data-type="iframe" data-src="https://inv.soarr.com/forms/RequestAQuoteFBox.aspx?DealershipID={{dealer.id}}&amp;subject=Unit Inquiry - {{year}} {{make}} {{model}}  - Unit {{stockNumber}}"  href="javascript:;">Request A Quote</a>
            
            </div>
        </div>
    </div>


    {{#if (length videos)}}
        <div class="video-frame">
            <lite-youtube videoid="{{videos.0.youtubeVideoId}}"></lite-youtube>
        </div>
    {{/if}}

    {{#if notes.external}}
    <div id="spec-extnotes">
        <div class="spec-sub-title">Notes</div>
        <div class="spec-detailed-extnotes">
            {{{notes.external}}}
        </div>
    </div>
    {{/if}}
    
    <div id="spec-detailed-specs">
        <div class="spec-sub-title">Detailed Specifications</div>
        <div class="spec-simple-table">
        {{#each attributes as |att i|}}
            <div class="spec-simple-table-row">
                <div class="spec-simple-table-label">
                    {{@key}}
                </div>
                <div class="spec-simple-table-data">
                    {{this}}
                </div>
            </div>
        {{/each}}
        </div>
    </div>

    <div id="spec-standard-options">
        <div class="spec-sub-title">Standard Options</div>
        <div id="spec-standard-options-table">
            {{#each options as |opt i|}}
            <div class="spec-options-table-row">
                {{opt}}
            </div>
            {{/each}}
        </div>



        <div id="loancalcjava">
            <div id="loancalcjava-frame">
                <div class="subtitle">Payment and Affordability</div>
                <div class="maintitle">Calculator</div>
                <div id="loancalcjava-subframe">
                    <div class="calculator-loan">
                        <div class="container form"></div>
        
                        <div class="container">
                            
                            <div class="results"></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>


    {{#similarInventory count="4"}}
        {{#if (gt units.length 0)}}
            <div id="similar-units-wrapper">
                <div class="spec-sub-title">Similar Units</div>
            <!-- THIS IS FOR WHEN THERE ARE SIMILAR UNITS FOUND -->
                <div id="similar-units" class="">
                
                    {{#each units}}
                        <!-- DO YOUR THING HERE FOR EACH UNIT. THIS IS JUST A SAMPLE -->
                        <div class="sim-unit">
                            <a href="{{specsheet .}}"><img class="sim-thumb" src="{{thumbnail .}}" /></a>
                            <div class="">
                            <a class="sim-title" href="{{specsheet .}}">{{year}} {{make}} {{model}}</a>
                                    <div class="sim-price">
                                        {{#if pricing.asking}}
                                            Price: {{formatCurrency pricing.asking }}
                                        {{else}}
                                            Call for Price
                                        {{/if}}
                                    </div>
                                    <div class="sim-stocknum">Stock# {{stockNumber}}</div>
                                </ul>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </div>
        {{else}}
            
        {{/if}}
    {{/similarInventory}}

</div>


    
    
    
<script>
    function formatCurrency(total) {
        if(total < 0) {
                neg = true;
                total = Math.abs(total);
            }
            return parseFloat(total, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString();
        }
                
        // start accrue.js
        jQuery(document).ready(function( $ ) {	
        
            //Populate the loan calculator with the price of the current unit
            $.fn.accrue.options.default_values = {
                amount: '$100,000',
                rate: "7%",
                rate_compare: "1.49%",
                term: "36m"
            };
            
            $(".calculator-loan").accrue();
        
            $(".amount").keydown(function (e) {
                // Allow: backspace, delete, tab, escape, enter and .
                if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
                    // Allow: Ctrl+A, Command+A
                    (e.keyCode == 65 && ( e.ctrlKey === true || e.metaKey === true ) ) || 
                    // Allow: home, end, left, right, down, up
                    (e.keyCode >= 35 && e.keyCode <= 40)) {
                        // let it happen, don't do anything
                        return;
                }
                // Ensure that it is a number and stop the keypress
                if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                    e.preventDefault();
                }
            });
            
            $(".rate").keydown(function (e) {
                // Allow: backspace, delete, tab, escape, enter and .
                if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
                    // Allow: Ctrl+A, Command+A
                    (e.keyCode == 65 && ( e.ctrlKey === true || e.metaKey === true ) ) || 
                    // Allow: home, end, left, right, down, up
                    (e.keyCode >= 35 && e.keyCode <= 40)) {
                        // let it happen, don't do anything
                        return;
                }
                // Ensure that it is a number and stop the keypress
                if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                    e.preventDefault();
                }
            });
            
            $(".term").keydown(function (e) {
                var test = $(this).getSelectionStart();
                alert(test );
                
                var tempThisValue = $(this).val();
                var lastchar = tempThisValue.substring(tempThisValue.length - 1, tempThisValue.length);
                // Allow: backspace, delete, tab, escape, enter and .
                if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
                    // Allow: Ctrl+A, Command+A
                    (e.keyCode == 65 && ( e.ctrlKey === true || e.metaKey === true ) ) ||
                    // Allow: home, end, left, right, down, up
                    (e.keyCode >= 35 && e.keyCode <= 40) ||
                    // Allow: m
                    (e.keyCode == 77 && tempThisValue.indexOf('m') == -1 && tempThisValue.indexOf('y') == -1 ) || 
                    // Allow: y
                    (e.keyCode == 89 && tempThisValue.indexOf('m') == -1 && tempThisValue.indexOf('y') == -1 )) {
                    // let it happen, don't do anything
                    return;
                }
                // Ensure that it is a number and stop the keypress
                if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                    e.preventDefault();
                }
                //	if (((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)) && ((lastchar == "m") || (lastchar == "y"))) {
                //		e.preventDefault();
                //	}
        
                
            });
        
        
            
            $(".amount").blur(function(){
                var boxvalue = $(this).val();
                var boxvalue = boxvalue.replace(/,/g, ''), asANumber = +boxvalue;
                
                var checkfordollar = boxvalue.substring(0, 1);
                if (checkfordollar == "$") {
        
                    var boxvalue = boxvalue.substring(1, boxvalue.length);
                    var boxvalueformatted = formatCurrency(boxvalue);
                    
                } else {
                    var boxvalueformatted = formatCurrency(boxvalue);
                }
                $(this).val("$" + boxvalueformatted);
            
            });
            
            $(".rate").blur(function(){
                var boxvalue = $(this).val();
                var boxchar = boxvalue.substring(boxvalue.length - 1, boxvalue.length);
                
                boxvalue = boxvalue.replace('%', '') + "%";
                
                $(this).val(boxvalue);
            });
            
            $(".term").blur(function(){
                var tempThisValue = $(this).val();
                if (tempThisValue.indexOf('m') == -1 && tempThisValue.indexOf('y') == -1) {
                $(this).val(tempThisValue + "m");
                }
                
        
            });
        
        });

    </script>








    <script>
	var myIntervalLeft;
	var myIntervalRight;

	jQuery(document).ready(function( $ ) {		

		$('body').on('change', 'select', function() {
			$('#minisearch').submit();
		});

		$('body').on('click', '#clearfilter', function() {
			event.preventDefault();
		  	window.location = 'http://' + window.location.hostname + window.location.pathname;
		});

		$('body').on('click', '.spec-subphotos-photo', function() {
			$('#loading-image').css('display', 'block');
			$('.spec-subphotos-photo').removeClass("selected-photo");
			$(this).addClass("selected-photo");
			$('#spec-mainphoto img').one('load', hideLoader).attr('src', $(this).attr("data-largeimage"));
		});   

		$('body').on('mousedown', '#spec-subphotos-left', function() {
			clearInterval(myIntervalLeft);
			myIntervalLeft = setInterval(moveSubPhotosLeft, 20);
		}); 
		
		$('body').on('mouseup', '#spec-subphotos-left', function() {
			clearInterval(myIntervalLeft);
		}); 

        $('body').on('touchstart', '#spec-subphotos-left', function() {
			clearInterval(myIntervalLeft);
			myIntervalLeft = setInterval(moveSubPhotosLeft, 20);
		}); 
		
		$('body').on('touchend', '#spec-subphotos-left', function() {
			clearInterval(myIntervalLeft);
		}); 

		$('body').on('mouseleave', '#spec-subphotos-left', function() {
			clearInterval(myIntervalLeft);
		}); 

		$('body').on('mousedown', '#spec-subphotos-right', function() {
			clearInterval(myIntervalRight);
			myIntervalRight = setInterval(moveSubPhotosRight, 20);
		}); 
		
		$('body').on('mouseup', '#spec-subphotos-right', function() {
			clearInterval(myIntervalRight);
		}); 

        $('body').on('touchstart', '#spec-subphotos-right', function() {
			clearInterval(myIntervalRight);
			myIntervalRight = setInterval(moveSubPhotosRight, 20);
		}); 
		
		$('body').on('touchend', '#spec-subphotos-right', function() {
			clearInterval(myIntervalRight);
		}); 

		$('body').on('mouseleave', '#spec-subphotos-right', function() {
			clearInterval(myIntervalRight);
		}); 


        $('body').on('ontouchmove', '#spec-subphotos-holder', function() {
			var newX = event.touches[0].clientX;
            alert (newX);
            $('#spec-subphotos-holder').css('left', newX + "px");
		}); 


		function hideLoader () {
            $('#loading-image').css('display', 'none');
        }

        function moveSubPhotosLeft() {
            var currentPosition = parseInt($('#spec-subphotos-holder').css('left'));
            if (currentPosition >= 0) {
                $('#spec-subphotos-holder').css('left', "0px");
            } else {
                var currentPosition = parseInt($('#spec-subphotos-holder').css('left'));
                currentPosition = currentPosition + 10;
                $('#spec-subphotos-holder').css('left', currentPosition + "px");
            }
        }

        function moveSubPhotosRight() {
            var currentHolderWidth = parseInt($('#spec-subphotos-holder').css('width'));
            var currentWidth = parseInt($('#spec-subphotos').css('width'));
            var currentPosition = parseInt($('#spec-subphotos-holder').css('left'));
            if ( (currentPosition - currentWidth + currentHolderWidth) <= 3) {
                // $('#spec-subphotos-holder').css('left', "0px");
            } else {
                currentPosition = currentPosition - 10;
                $('#spec-subphotos-holder').css('left', currentPosition + "px");
            }
        }
		 
	});
	
    </script>

{{/with}}