{{SHOPCART_CSS}}

<script type="text/javascript" src="/javascript/jquery.js"></script>
<script type="text/javascript">

$(function() {
	$(".sc_mobi_nav_trigger").click(function() {
		
		$(".sc_mobi_nav_container").toggleClass("sc_mobi_showme");
	});
});
	
</script>

<script type="text/javascript">
function verifyFileTypes(){
	
	
	var fileFieldIDs = new Array({{EXTENSION_FILE_TYPE_JAVASCRIPT}});
	for(var i = 1; i < fileFieldIDs.length; ++i){
		try {
			var obj = document.getElementById('extension_' + fileFieldIDs[i]);
			var typeObj = document.getElementById('extension_' + fileFieldIDs[i] + '_etype');
			var nameObj = document.getElementById('extension_' + fileFieldIDs[i] + '_ename');
			if(typeObj.value == "PHOTO"){
				//Verify that this can ONLY be a .jpg or .jpeg
				if(obj.value != ""){
					var extArray = obj.value.split(".");
					if(extArray[extArray.length-1].toUpperCase() != "JPG" && extArray[extArray.length-1].toUpperCase() != "JPEG"){
						alert("You may only upload .jpg and .jpeg images in the " + nameObj.value + " field!");
						return(false);
					}
				}
			}
			if(typeObj.value == "DOCUMENT"){
				if(obj.value != ""){
					var allowdValues = new Array("doc","txt","wpd","pdf","rtf");
					var extArray = obj.value.split(".");
					var found = false;
					var allowdMsg = "You may only upload the following file types in the " + nameObj.value + " field: ";
					for(var xyz = 0; xyz < allowdValues.length; ++xyz){
						if(extArray[extArray.length-1].toUpperCase() == allowdValues[xyz].toUpperCase()){
							found = true;
						}
						if(xyz > 0){ allowdMsg += ", "; }
						allowdMsg += "" + allowdValues[xyz];
					}
					
					if(found != true){
						alert(allowdMsg);
						return(false);
					}
				}
			}
			if(typeObj.value == "FILE"){
				if(obj.value != ""){
					var allowdValues = new Array("zip","gz","tar");
					var extArray = obj.value.split(".");
					var found = false;
					var allowdMsg = "You may only upload the following file types in the " + nameObj.value + " field: ";
					for(var xyz = 0; xyz < allowdValues.length; ++xyz){
						if(extArray[extArray.length-1].toUpperCase() == allowdValues[xyz].toUpperCase()){
							found = true;
						}
						if(xyz > 0){ allowdMsg += ", "; }
						allowdMsg += "" + allowdValues[xyz];
					}
					
					if(found != true){
						alert(allowdMsg);
						return(false);
					}
				}
			}
		}
		catch(e){
			alert("System Error...\r\nextension_" + formFieldIDs[i]);
		}
	}
	
	return(true);
}
function validateExtensionFields(){
	
	
	var formFieldIDs = new Array({{EXTENSION_JAVASCRIPT}});
	for(var i = 1; i < formFieldIDs.length; ++i){
		try {
			//Get the objects by their id number
			var obj = document.getElementById('extension_' + formFieldIDs[i]);
			var typeObj = document.getElementById('extension_' + formFieldIDs[i] + '_etype');
			var nameObj = document.getElementById('extension_' + formFieldIDs[i] + '_ename');
			if(typeObj.value == "CHECKBOX"){
				if(obj.checked == false){
					return(false);
				}
			}
			if(typeObj.value == "TEXT" || typeObj.value == "TEXTAREA"){
				if(obj.value == ""){
					return(false);
				}
			}
			if(typeObj.value == "PHOTO"){
				//Verify that this can ONLY be a .jpg or .jpeg
				if(obj.value == ""){
					return(false);
				}
				var extArray = obj.value.split(".");
				if(extArray[extArray.length-1].toUpperCase() != "JPG" && extArray[extArray.length-1].toUpperCase() != "JPEG"){
					alert("You may only upload .jpg and .jpeg images in the " + nameObj.value + " field!");
					return(false);
				}
			}
			if(typeObj.value == "DOCUMENT"){
				if(obj.value == ""){
					return(false);
				}
				var allowdValues = new Array("doc","txt","wpd","pdf","rtf");
				var extArray = obj.value.split(".");
				var found = false;
				var allowdMsg = "You may only upload the following file types in the " + nameObj.value + " field: ";
				for(var xyz = 0; xyz < allowdValues.length; ++xyz){
					if(extArray[extArray.length-1].toUpperCase() == allowdValues[xyz].toUpperCase()){
						found = true;
					}
					if(xyz > 0){ allowdMsg += ", "; }
					allowdMsg += "" + allowdValues[xyz];
				}
				
				if(found != true){
					alert(allowdMsg);
					return(false);
				}
			}
			if(typeObj.value == "FILE"){
				if(obj.value == ""){
					return(false);
				}
				var allowdValues = new Array("zip","gz","tar");
				var extArray = obj.value.split(".");
				var found = false;
				var allowdMsg = "You may only upload the following file types in the " + nameObj.value + " field: ";
				for(var xyz = 0; xyz < allowdValues.length; ++xyz){
					if(extArray[extArray.length-1].toUpperCase() == allowdValues[xyz].toUpperCase()){
						found = true;
					}
					if(xyz > 0){ allowdMsg += ", "; }
					allowdMsg += "" + allowdValues[xyz];
				}
				
				if(found != true){
					alert(allowdMsg);
					return(false);
				}
			}
			if(typeObj.value == "LIST"){
				if(obj.selectedIndex == 0){
					return(false);
				}
			}
			if(typeObj.value == "MULTISELECT_LIST"){
				//Check that there is SOMETHING selected
				var checked = false;
				for(var j = 0; j < obj.options.length; ++j){
					if(obj.options[j].selected == true){
						checked = true;
					}
				}
				if(checked == false){
					return(checked);
				}
			}
			if(typeObj.value == "RADIO"){
				var checked = false;
				obj = eval("document.productDisplayForm.extension_" + formFieldIDs[i]);
				for(var j = 0; j < obj.length; ++j){
					if(obj[j].checked == true){
						checked = true;
					}
				}
				
				if(checked == false){
					return(false);
				}
			}
		}
		catch(e){
			alert("System Error...\r\nextension_" + formFieldIDs[i]);
		}
	}
	return(true);
}

function validate(){
	if(validateExtensionFields() == false){
		return(false);
	}
	return(true);
}
</script>

<div class="sc_div_grid_2col">
	<div class="sc_div_grid_2col_left">
		<div class="sc_sidenav_pad">
	    <div class="sc_cart_summary">
    		Cart - {{MINI_CART}}{{TOTAL_PRODUCTS_COUNT}} Items - <strong>${{SUBTOTAL_LINE}}{{MINI_CART_SUBTOTAL_FORMATTED}}{{/SUBTOTAL_LINE}}</strong>{{/MINI_CART}}
    		
    		<a href="{{SELF_LINK}}?command=viewCart" class="sc_view_cart_button sc_filled_button sc_filled_color">View Cart</a>
    	</div> 
	    	
    	<div class="sc_mobi_nav_trigger"><a href="javascript:void(0);">Open/Close Navigation</a></div>
    	<div class="sc_mobi_nav_container">
    		
    		<div class="sc_sidenav_headers">Product Search</div>
    		<div class="sc_cart_search_leftcol sc_sidenav_sideborders">
    			<!-- Search auto complete code -->
					{{AUTOCOMPLETE_JAVASCRIPT}}
					<form name="scSearchForm" method="get" action="{{SELF_LINK}}">
					<label for="txtSearch" style="display: none;">Product Search</label>
					<input name="txtSearch" id="txtSearch" type="text" /> 
					<input type="submit" value="Go" title="Search Shop Cart" />
					<input type="hidden" name="command" value="doCartSearch">
					</form>	
    		</div>
    		 

				<div class="sc_outerbox_border">
					{{MENU}}
	 				{{LEVEL_2}}
	 				{{CURRENT_LEVEL_CANCELS_OTHERS}}
	 				<div>
						{{PREVIOUS_CATEGORY_DATA}}
						<div class="sc_sidenav_headers">{{CATEGORY_NAME}}</div>
						{{/PREVIOUS_CATEGORY_DATA}}
          </div>
          <div class="sc_sidenav_sideborders">
          	
							{{CURRENT_CATEGORY_DATA}}
							<ul>
	            	{{STANDARD}}
	              <li><a href="{{CATEGORY_LINK}}">{{CATEGORY_NAME}}</a></li>
	              {{/STANDARD}}
	              {{CURRENT}}
	              <li><a href="{{CATEGORY_LINK}}">{{CATEGORY_NAME}}</a></li>
	              {{/CURRENT}}
	            </ul>
							{{/CURRENT_CATEGORY_DATA}}
							{{LEVEL_3}}
							
								{{CURRENT_CATEGORY_DATA}}
								<ul>
	                {{STANDARD}}
	                <li><a href="{{CATEGORY_LINK}}">{{CATEGORY_NAME}}</a></li>
	                {{/STANDARD}}
	                {{CURRENT}}
	                <li><a href="{{CATEGORY_LINK}}">{{CATEGORY_NAME}}</a></li>
	                {{/CURRENT}}
	                </ul>
								{{/CURRENT_CATEGORY_DATA}}
							
							{{/LEVEL_3}}
					</div>

	 				{{/LEVEL_2}}

	 				<div class="sc_sidenav_headers">Product Navigation</div>
					<div class="sc_sidenav_sideborders">
						<ul>
			        {{LEVEL_1}}
			        	{{CURRENT_CATEGORY_DATA}}
			          	{{STANDARD}}
			              <li><a href="{{CATEGORY_LINK}}">{{CATEGORY_NAME}}</a></li>
			          	{{/STANDARD}}
			          	{{CURRENT}}
			             <li><a href="{{CATEGORY_LINK}}">{{CATEGORY_NAME}}</a></li>
			          	{{/CURRENT}}
			        	{{/CURRENT_CATEGORY_DATA}}
			        {{/LEVEL_1}}
			      </ul>
					</div>
					<br>
					
					{{/MENU}}
				</div>
			</div>
		</div>
	</div>
	<div class="sc_div_grid_2col_right">
	  <div class="sc_main_column sc_content_style">
	  	<div class="sc_topheader_pad">
	  		<div class="sc_breadcrumb_style">
	        <a href="{{SELF_LINK}}">Home</a>
	        {{BREAD_CRUMB}}
	        {{LEVEL_1}} &gt; <a href="{{LINK}}">{{NAME}}</a>{{/LEVEL_1}}
	        {{LEVEL_2}} &gt; <a href="{{LINK}}">{{NAME}}</a>{{/LEVEL_2}}
	        {{LEVEL_3}} &gt; <a href="{{LINK}}">{{NAME}}</a>{{/LEVEL_3}}
	        {{LEVEL_4}} &gt; <a href="{{LINK}}">{{NAME}}</a>{{/LEVEL_4}}
	        {{LEVEL_5}} &gt; <a href="{{LINK}}">{{NAME}}</a>{{/LEVEL_5}}
	        {{/BREAD_CRUMB}}
	        
	        <div style="float: right;"><a href="{{SELF_LINK}}?command=manageAccount">My Account</a> - {{LOGIN_LOGOUT_LINK}}</div>
	      </div>
	    </div>
	    
      {{PRODUCT_DISPLAY_LOOP}}
      <form name="productDisplayForm" autocomplete="off" action="{{SELF_LINK}}" method="post" enctype="multipart/form-data" onsubmit="if(verifyFileTypes() == true){ if(validateExtensionFields() == true){ return(true); } else { alert('You have not entered all the required fields!'); return(false); }} else { return(false); }">
      	<div class="sc_featureheaders">
      		<div class="sc_featured_box">{{PRODUCT_NAME}}</div>
      	</div>
      	<div class="sc_product_pad_style">
      		<div class="sc_product_inner_pad_style">
      			<div class="sc_div_grid_productview">
      				<div class="sc_div_grid_productview_left">
		      			<!--<div class="sc_view_product_main_img block_cell_mobi">-->
                            	{{SHOW_ADDITIONAL_PHOTOS}}
                            		<a href="javascript:popup(640,600,'{{PRODUCT_VIEW_IMAGE_LINK}}');"><img src="./photos/shopcart/productImages/{{PRODUCT_FILENAME}}" class="sc_product_border" alt="{{PRODUCT_NAME}}" /></a>{{SHOW_ADDITIONAL_LINK}}<br><a href="javascript:popup(640,600,'{{PRODUCT_VIEW_IMAGE_LINK}}');">Click Here for Additional Photos.</a>{{/SHOW_ADDITIONAL_LINK}}
															{{/SHOW_ADDITIONAL_PHOTOS}}
															
															{{SHOW_DEFAULT_PHOTO}}
																<img src="./photos/shopcart/productImages/{{PRODUCT_FILENAME}}" class="sc_product_border" alt="{{PRODUCT_NAME}}" />
															{{/SHOW_DEFAULT_PHOTO}}
															
							</div>
							<div class="sc_div_grid_productview_right"> <!--class="sc_special_text_pad block_cell_mobi"-->
								<div class="style18">Price: ${{PRICE_BLOCK}}{{PRODUCT_PRICE_FORMATTED}}{{/PRICE_BLOCK}}{{PRODUCT_SPECIAL_BLOCK}}{{PRODUCT_SPECIAL_PRICE_FORMATTED}}{{/PRODUCT_SPECIAL_BLOCK}}</div>
								<div class="sc_product_text_spacer">
									<div class="style14">{{PRODUCT_NAME}} ({{PRODUCT_NUMBER}})</div>
								</div>
								<div class="sc_product_text_spacer">
									<div class="sc_prod_desc">{{PRODUCT_DESCRIPTION}}</div>
								</div>
								
								
								<div class="sc_product_text_spacer"><div class="sc_prod_additional">{{PRODUCT_ADDITIONAL_DETAILS}}</div></div>

								
								
								
								<div class="sc_product_text_spacer">
									{{BACK_ORDERED_MESSAGE}}
                   <div class="back_ordered_message">{{BACK_MESSAGE}}</div>
                  {{/BACK_ORDERED_MESSAGE}}
                  {{SOLD_OUT_MESSAGE}}
									<div class="sold_out_message">{{SOLD_OUT}}</div>
									{{/SOLD_OUT_MESSAGE}}
                  {{IS_SOLDOUT}}
                  <div class="sold_out">Out Of Stock</div>
                  {{/IS_SOLDOUT}}
                  {{IS_ACTIVE}}
									  <input type="hidden" name="productID" value="{{PRODUCT_ID}}" />
										<input type="hidden" name="command" value="addToCart" />
										<input type="hidden" name="quantity" value="1" />
										<input type="hidden" name="fpid" value="{{pID}}" />
										<input type="hidden" name="fcid" value="{{cID}}" />
										<input type="hidden" name="nextCommand" value="viewCart" />
										<div class="button_style sc_align_left">
											<input type="submit" value="Add To Cart">
											
											<!--<a href="javascript:if(verifyFileTypes() == true){ if(validateExtensionFields() == true){ document.productDisplayForm.submit(); } else { alert('You have not entered all the required fields!'); }}">Add To Cart</a>  -->
										</div>
                   {{/IS_ACTIVE}}
								</div>
							</div>
						</div>
					</div>
				</div>
				
				{{PRODUCT_EXTENSIONS}}
				<div class="sc_featureheaders">
      		<div class="style21">Product Options</div>
      	</div>
        
        <div class="sc_product_pad_style">
        	<table title="Product options">
     			{{PE_LOOP}}
          	{{EXTENSION_1}}
							{{GROUP}}
								{{GROUP_IS_HEADER}}
									<tr><td class="content" colspan="2">{{EXTENSION_NAME}}</td></tr>
									{{SUB_EXTENSIONS}}
										{{SUBEXTENSION_1}}
											<tr><td class="content">{{EXTENSION_REQUIRED_BLOCK}}* {{/EXTENSION_REQUIRED_BLOCK}}{{EXTENSION_NAME}}</td><td class="content">{{OBJECT}}</td></tr>
										{{/SUBEXTENSION_1}}
									{{/SUB_EXTENSIONS}}
								{{/GROUP_IS_HEADER}}
								{{GROUP_IS_OBJECT}}
									<tr><td class="content">{{EXTENSION_REQUIRED_BLOCK}}* {{/EXTENSION_REQUIRED_BLOCK}}{{EXTENSION_NAME}}</td><td><table border="0" cellpadding="0" cellspacing="0">
									{{SINGLE_ITEM}}
										<tr><td class="content">{{OBJECT}}</td></tr>
									{{/SINGLE_ITEM}}
									{{MULTIPLE_ITEMS}}
										{{MI_LOOP}}
											{{MI_ITEM_1}}
												<tr><td class="content">{{OBJECT}} {{EXTENSION_NAME}}</td></tr>
											{{/MI_ITEM_1}}
										{{/MI_LOOP}}
									{{/MULTIPLE_ITEMS}}
									</table></td></tr>
								{{/GROUP_IS_OBJECT}}
							{{/GROUP}}
							{{EXTENSION}}
								<tr><td class="content">{{EXTENSION_REQUIRED_BLOCK}}* {{/EXTENSION_REQUIRED_BLOCK}}{{EXTENSION_NAME}}</td><td class="content">{{OBJECT}}</td></tr>
							{{/EXTENSION}}
          	{{/EXTENSION_1}}
          {{/PE_LOOP}}
          </table>
          <br>
        </div>
        {{/PRODUCT_EXTENSIONS}}
        

				{{PRODUCT_FULL_DESCRIPTION_BLOCK}}
				<div class="sc_featureheaders">
      		<div class="style21">Product Information</div>
      	</div>
        
        <div class="sc_product_pad_style">
					{{PRODUCT_FULL_DESCRIPTION}}
				</div>
				{{/PRODUCT_FULL_DESCRIPTION_BLOCK}}
         
    	</form>
      {{/PRODUCT_DISPLAY_LOOP}}
    </div>
  </div>
</div>