{config_load file=$language_path section="general"}
{config_load file=$language_path section="shippings"}
<script type="text/javascript">
    {if $V2}
    var V2 = true;
    {/if}
        
    {literal}
    $().ready(function(){
	$('input[name="barcode"]').css({'margin':'4px','padding':'10px','font-size':'16px','border':'1px solid #000'});
    	$('#scanner_container #ean_scanner').click(function(){
	    sc_change_call($(this));
	});
    	$('#scanner_container #products_model_scanner').click(function(){
	    sc_change_call($(this));
	});
	$('#scanner_container #orders_scanner').click(function(){
	    sc_change_call($(this));
	});
	$('#scanner_container #shipping_items_scanner').click(function(){
	    sc_change_call($(this));
	});
    });
    function sc_change_call(element){
	var element_value = '';
	switch($(element).attr('id')){
	    case 'ean_scanner':
		var target_elements = [$('#scanner_container #orders_scanner'), $('#scanner_container #products_model_scanner'), $('#scanner_container #shipping_items_scanner')];
		break;
	    case 'products_model_scanner':
		var target_elements = [$('#scanner_container #ean_scanner'),$('#scanner_container #shipping_items_scanner'),  $('#scanner_container #orders_scanner')];
		element_value = 'products_model';
		break;
	    case 'orders_scanner':
		var target_elements = [$('#scanner_container #ean_scanner'), $('#scanner_container #products_model_scanner'), $('#scanner_container #shipping_items_scanner')];
		element_value = 'orders';
		break;
	    case 'shipping_items_scanner':
		var target_elements = [$('#scanner_container #ean_scanner'),$('#scanner_container #products_model_scanner'),  $('#scanner_container #orders_scanner')];
		element_value = 'items';
		break;
	}
	//    var target_element = ($(element).attr('id') == 'ean_scanner') ? $('#scanner_container #orders_scanner') : $('#scanner_container #ean_scanner');
	//    var element_value = ($(element).attr('id') == 'ean_scanner') ? '' : 'orders';
	if($(element).hasClass('scOn')){
	    return true;
	}else{
	    $(element).removeClass('scOff').addClass('scOn');
	}
        $('#scanner_container select[name="scanner_mode"]').val(element_value);
	document.forms['scanner_mode'].elements['barcode'].focus();
	
	for(i=0;i<target_elements.length;i++){
	       target_elements[i].removeClass('scOn').addClass('scOff');
	}
    }
    function sc_change(){
	switch($('#scanner_container select[name="scanner_mode"]').val()){
	    case 'orders':
		sc_change_call($('#scanner_container #orders_scanner'));
		break;
	    case 'items':
		sc_change_call($('#scanner_container #shipping_items_scanner'));
		break;
	    case 'products_model':
		sc_change_call($('#scanner_container #products_model_scanner'));
		break;
	    default:
		sc_change_call($('#scanner_container #ean_scanner'));
		break;
	}
    }
    function do_scan(dom){
	var bc = $('#scanner_mode input[name="barcode"]').val();
	if(bc.length < 1){
	    return false;
	}
        if(V2){
            return true;
        }
        $.ajax({
                type: "POST",
                url: dom.action,
                data: $('#scanner_mode').serialize(),
                success: function(msg){
                        $('#scanner_container').html(msg);
                }
        });
        return false;
    }
    {/literal}
</script>    
<style type="text/css">
    {literal}
    #scanner_container #ean_scanner {
	float: left;
	width: 23%;
	padding: 4px;
    }
    #scanner_container #orders_scanner {
	width: 23%;
	padding: 4px;
	display: inline-block;
	cursor: arrow;
	float: left;
    }
    #scanner_container #products_model_scanner {
	width: 23%;
	padding: 4px;
	display: inline-block;
	cursor: arrow;
	float: left;
    }
    #scanner_container #shipping_items_scanner {
	width: 23%;
	padding: 4px;
	display: inline-block;
	cursor: arrow;
    }
    #scanner_container .scOff{
	filter:alpha(opacity=50); /* IE */
	-moz-opacity: 0.50; /* Mozilla */
	opacity: 0.50; /* Opera */
	cursor: pointer;
    }
    #scanner_container .scOn{
    }
    {/literal}
</style>
<div id="scanner_container" class="main">
    <div id="ean_scanner" class="{if $SHIPPING_BARCODESCAN_DEFAULTMODE == 'ean'}scOn{else}scOff{/if}">
	<b>{$HEADING_TITLE}</b><br />
	{$SCANNER_MODE_INTRO}
    </div><div id="products_model_scanner" class="{if $SHIPPING_BARCODESCAN_DEFAULTMODE == 'products_model'}scOn{else}scOff{/if}">
	<b>{$HEADING_TITLE_PRODUCTS_MODEL}</b><br />
	{$SCANNER_MODE_PRODUCTS_MODEL_INTRO}
    </div><div id="orders_scanner" class="{if $SHIPPING_BARCODESCAN_DEFAULTMODE == 'orders'}scOn{else}scOff{/if}">
	<b>{$HEADING_TITLE_ORDERS}</b><br />
	{$SCANNER_MODE_ORDERS_INTRO}
    </div><div id="shipping_items_scanner" class="{if $SHIPPING_BARCODESCAN_DEFAULTMODE == 'items'}scOn{else}scOff{/if}">
	<b>{$HEADING_TITLE_SHIPPING_ITEMS}</b><br />
	{$SCANNER_MODE_SHIPPING_ITEMS_INTRO}
    </div><br clear="all" />
{$FORM}
    <select name="scanner_mode" onchange="sc_change();">
	<option value="ean">Barcode/EAN</option>
	<option value="products_model"{if $SHIPPING_BARCODESCAN_DEFAULTMODE == 'products_model'} selected="selected"{/if}>{#products_model#}</option>
	<option value="orders"{if $SHIPPING_BARCODESCAN_DEFAULTMODE == 'orders'} selected="selected"{/if}>{#orders#}</option>
	<option value="items"{if $SHIPPING_BARCODESCAN_DEFAULTMODE == 'items'} selected="selected"{/if}>{$SCANNER_MODE_SHIPPING_ITEMS_OPTION}</option>
    </select>
{$INPUT_BARCODE}
<input type="submit" value="{#search#}" class="ui-button ui-corner-all ui-state-default" />
{$FORM_END}
</div>

<script type="text/javascript">
<!--
document.forms['scanner_mode'].elements['barcode'].focus();
//-->
</script>