{config_load file=$language_path section="general"}
{config_load file=$language_path section="products"}
{assign var="image_path" value="../images/product_images/thumbnail_images/"}
{assign var="no_image_path" value="images/"}
<script src="{$CDN_LINK_TINYMCE}"></script>
<script type="text/javascript">
var text_delete = '{#delete#}';
var text_edit = '{#edit#}';
var text_price_brutto = '{#price_brutto#}';
var really_delete_products_property = '{#really_delete_products_property#}';
var really_delete_products_properties_property_value = '{#really_delete_products_properties_property_value#}';
var link_delete_products_properties_property_value = '{$link_delete_products_properties_property_value}';
var link_add_products_property_values = '{$link_add_products_property_values}';
var image_path = '{$image_path}';
var no_image_path = '{$no_image_path}';
var link_update_property_value_image = '{$link_update_property_value_image}';
var addform_legend = '{#add_product_property_values#}';
var product_image_text = '{#product#} {#image#}';
var files_image_text = '{#image#} (files/)';
var text_save = '{#save#}';
var text_xy_percent_add = '{#text_xy_percent_add#}';
{literal}

function _delete_products_properties_property_value(ppvID){
	var products_properties_values_id = ppvID;
	yes = confirm(really_delete_products_properties_property_value);
	if(yes){
		$.ajax({
			url: link_delete_products_properties_property_value,
			data: { products_properties_values_id: products_properties_values_id },
			success:function(response){
				$('table#saved_values tbody tr#'+products_properties_values_id).remove();
				number_of_properties = $('table#saved_values tbody').children().length;
				$('table#saved_properties tbody tr#'+response+' div.add_products_properties_property_value').html(text_edit+' ('+number_of_properties+')');
			}
		});
	}
}

function ppv_edit(ppvID){
    $('form#add_product_properties_value_form fieldset legend').html(text_edit);
    $('form#add_product_properties_value_form input#cancel').show();
    $('form#add_product_properties_value_form input[name="ppvID"]').val(ppvID);
    $('table#saved_values tbody tr#'+ppvID+' td').each(function(){
	switch($(this).attr('class')){
	    case 'title':
		$('form#add_product_properties_value_form input[name="title['+$(this).attr('id')+']"]').val( $(this).html() );
		break;
	}
	switch($(this).attr('id')){
	    case 'price':
	    case 'xy_percent_add':
	    case 'sort_order':
	    case 'input_span':
		$('form#add_product_properties_value_form input[name="'+$(this).attr('id')+'"]').val( $(this).html().trim() );
		break;
	}
    });
}

function add_path_complete(element){
	$(element).pathcomplete({
	    source: "categories.php?action=image_search",
	    minLength: 2
	});
}

function add_path_complete_save_button_action(){
    $('img.save_file_image').each(function(){
	$(this).unbind('click');
	$(this).on('click',function(){
		var ppvID = $(this).attr('id');
		var ppv_par = '&ppvID='+ppvID;
		$.ajax({
		   url: 'categories.php?action=update_products_properties_property_file_image'+ppv_par+'&file_image='+$('input[name="files_image"]#files_image_'+ppvID).val(),
		   dataType: 'json',
		   success: function(json){
		       if(json.MSG != ''){
			   alert(json.MSG);
		       }else{
			   if($('input[name="files_image"]#files_image_'+ppvID).val() != ''){
			       $('select.select_property_value_image #'+ppvID).val(0);
			       var img = $('input[name="files_image"]#files_image_'+ppvID).val();
			       $('input[name="files_image"]#files_image_'+ppvID).val('');
			       $('img#img'+ppvID).attr('src',"../files/"+img);
			   }else{

			   }
		       }
		   }
		});
	    }).css('cursor','pointer');
    });
}

function ppv_addformreset(){
    $('form#add_product_properties_value_form fieldset legend').html(addform_legend);
    $('form#add_product_properties_value_form input[name="ppvID"]').val('');
    $('form#add_product_properties_value_form input#cancel').hide();
    $('form#add_product_properties_value_form').get(0).reset();
}

function ppv_change_image(elm){
	    $(elm).change(function(){
		var ppvID = $(this).attr('id');
		$.ajax({
			url: link_update_property_value_image,
			data: { image: $(this).val(),id: ppvID },
			success:function(image_name){
			    if(image_name != '')
				img_src = image_path+image_name;
			    else
				img_src = no_image_path+'pixel_trans.gif';
			    $('table#saved_values tbody td#image img#img'+ppvID ).attr('src',img_src);
			    $('table#saved_values tbody td div#statusimg'+ppvID).show();
			    $('table#saved_values tbody td div#statusimg'+ppvID).fadeOut(4800);
			    $('input[name="files_image"]#'+ppvID).val('');
			}
		});
	    });
}
var filemanager_single_use_win;
$().ready(function(){
        $('a.tinymce_filemanager').on('click',function(){
            var submID = $(this).parent().find('select').attr('id');
            filemanager_single_use_win = window.open($(this).attr('id')+'&submID='+submID,'filemanager_tinymce','location=0,toolbar=0,menubar=0,resizable=1,width=800,height=600,top=100,left=100');
            if(!filemanager_single_use_win || filemanager_single_use_win.closed || typeof filemanager_single_use_win.closed=='undefined') {
                alert('Active Popupblocker detected');
            }
    
        });
	$('a.delete_products_properties_property_value').each(function(){
		$(this).click(function(){
			_delete_products_properties_property_value($(this).attr('id'));
		});
	});
	$('a.edit_products_properties_property_value').each(function(){
		$(this).click(function(){
			ppv_edit($(this).attr('id'));
		});
	});
	$('form#add_product_properties_value_form #add_product_properties_values_button').click(function(){
		var valid = true;
		{/literal}
		
		{foreach from=$languages item=lang}
		
		if(valid){
			if($('form#add_product_properties_value_form #title_{$lang.id}').val() == ''){
				valid = false;
                        }
                }
		
		{/foreach}
		
		{literal}
		
		if(!valid){
			return false;
		}
		$.ajax({
			url: link_add_products_property_values,
			data: $('form#add_product_properties_value_form').serialize(),
			dataType: 'json',
			success:function(json){
			    if(json.updated == 0){ // adding results
			
				title_str = '';
				itms = json.description;
				for(i=0;i<itms.length;i++){
					item = itms[i];
					title_str += '	<td class="title" id="'+item.language_id+'" valign="top">'+item.title+'</td>';
				}

                                $('table#saved_values tbody').append('<tr id="'+json.products_properties_values_id+'">'+title_str+
					'	<td valign="top" id="image">'+
					'	    <img id="img'+json.products_properties_values_id+'" src="'+no_image_path+'pixel_trans.gif" class="thmb_image" />'+
					'	    <div class="statusimg" id="statusimg'+json.products_properties_values_id+'">Aktualisiert</div>'+
					'	</td>'+
					'	<td valign="top" align="right" id="price">' +json.price+'</td>'+
					'	<td valign="top" align="right" id="xy_percent_add">' +json.xy_percent_add+'</td>'+
					'	<td valign="top" align="right" id="sort_order">' +json.sort_order+'</td>'+
					'       <td valign="top" id="input_span">' +json.input_span+'</td>'+
					'	<td valign="top" id="image_input"><i>'+product_image_text+'</i><br />'+
					'	    '+json.image_input+'<br />'+
					'	    <b>oder</b> <i>'+files_image_text+'</i><br />'+
					'	    '+json.files_image_input+'&nbsp;<img src="images/icon_save.gif" class="save_file_image" title="'+text_save+'" id="'+json.products_properties_values_id+'" />'+
					'	</td><td valign="top" id="action">'+
					'	    <a href="#add_product_properties_value_form" id="'+json.products_properties_values_id+'" class="edit_products_properties_property_value"><img src="images/arrow_right.gif" title="'+text_edit+'" border="0" /></a>'+
					'	    &nbsp;'+
					'	    <a href="javascript:;" id="'+json.products_properties_values_id+'" class="delete_products_properties_property_value"><img src="images/icons/cross.gif" title="'+text_delete+'" border="0" /></a>'+
					'	</td>'+
					'</tr>'
				);
				add_path_complete($('input[name="files_image"]#files_image_'+json.products_properties_values_id));
				add_path_complete_save_button_action();
				number_of_properties = $('table#saved_values tbody').children().length;
				$('table#saved_properties tbody tr#'+json.products_properties_id+' div.add_products_properties_property_value').html(text_edit+' ('+number_of_properties+')');
				
				
				// DELETE EINBAUEN!!
				$('a.delete_products_properties_property_value').each(function(){
					$(this).click(function(){
						_delete_products_properties_property_value($(this).attr('id'));
					});
				});
				// img change
				$('table#saved_values .select_property_value_image').each(function(){
				    ppv_change_image(this);
				});
			    }else{ // edit response
				itms = json.description;
				$('table#saved_values tbody tr#'+json.products_properties_values_id+' td[id="price"]').html(json.price);
				$('table#saved_values tbody tr#'+json.products_properties_values_id+' td[id="xy_percent_add"]').html(json.xy_percent_add);
				$('table#saved_values tbody tr#'+json.products_properties_values_id+' td[id="sort_order"]').html(json.sort_order);
				$('table#saved_values tbody tr#'+json.products_properties_values_id+' td[id="input_span"]').html(json.input_span);
				for(i=0;i<itms.length;i++){
					item = itms[i];
					$('table#saved_values tbody tr#'+json.products_properties_values_id+' td#'+item.language_id+'.title').html(item.title);
				}
			
			    }
			    ppv_addformreset();
			}
		});
	});
	$('table#saved_values .select_property_value_image').each(function(){
	    ppv_change_image(this);
	});
	$('form#add_product_properties_value_form input#cancel').click(function(){
	    ppv_addformreset();
	});
	
	
    $.widget( "custom.pathcomplete", $.ui.autocomplete, {
	_create: function() {
	  this._super();
	  this.widget().menu( "option", "items", "> :not(.ui-autocomplete-path)" );
	},
	_renderMenu: function( ul, items ) {
	  var that = this,
	    currentPath= "";
	  $.each( items, function( index, item ) {
	    var li;
	    if ( item.path != currentPath && item.path != '.') {
	      ul.append( "<li class='ui-autocomplete-path'>/" + item.path + "</li>" );
	      currentPath = item.path;
	    }
	    li = that._renderItemData( ul, item );
	    if ( item.path ) {
	      li.attr( "aria-label", item.path + " : " + item.value );
	    }
	  });
	},
	_renderItem: function( ul, item ) {
	    return $( "<li>" )
		.append( item.img+'<a>' + item.label+'</a><br clear="all" />' )
	    .appendTo( ul );
	}
    });
    $('input[name="files_image"]').each(function(){
	add_path_complete($(this));
    });
    add_path_complete_save_button_action($(this));
});
{/literal}
</script>
<style type="text/css">
	{literal}
	td.delete_products_properties_property_value{
		cursor: pointer;
		text-decoration:underline;
	}
	img.image_search_res_img{
	    margin-right: 6px;
	    margin-left: 6px;
	    max-width:35px;
	    max-height:35px;
	}
	img.thmb_image {
			max-width:100px;
			max-height:100px;
	}
	div.statusimg {
	    display:none;
	}
	.ui-autocomplete-path{
			font-weight: bold;
	}
	{/literal}
</style>

<div class="main">
	<form id="add_product_properties_value_form">
	    <input type="hidden" name="ppvID" value="" />
	<fieldset>
		<legend>{#add_product_property_values#}</legend>
	{foreach item=lang from=$languages}
	<label for="title_{$lang.id}">{#product_property_value#} {$lang.name}<br /></label>
	<input type="text" size="20" maxlength="64" name="title[{$lang.id}]" id="title_{$lang.id}" class="text ui-widget-content ui-corner-all" /><br />
	{/foreach}
	<label for="price">{#price_brutto#}</label>
	<input type="text" size="5" maxlength="8" name="price" id="price" value="0.00" class="text ui-widget-content ui-corner-all" />
	<br />
        <div class="ui-state-default" style="padding: 4px;">
	<label for="xy_percent_add">{#xy_percent_add#}</label>
	<input type="text" size="5" maxlength="8" name="xy_percent_add" id="xy_percent_add" value="0.00" class="text ui-widget-content ui-corner-all" />
	</div>
	<label for="sort_order">{#product_property_sort_order#}</label>
	<input type="text" size="3" maxlength="5" name="sort_order" id="sort_order" value="0" class="text ui-widget-content ui-corner-all" />
	<br />
	<label for="input_span">{#input_span#}</label>
	<img alt="{#input_span_intro#}" title="{#input_span_intro#}" width="20" height="20" align="left" src="images/basicons/info22.png" /><input type="text" size="16" maxlength="16" name="input_span" id="input_span" value="" class="text ui-widget-content ui-corner-all" />
        <br />
	<input type="button" class="ui-button ui-corner-all ui-state-default" value="{#save#}" id="add_product_properties_values_button" />
	<input type="button" class="ui-button ui-corner-all ui-state-default" value="{#cancel#}" style="display: none;" id="cancel" />
	</fieldset>
	</form>
	<hr noshade="noshade" />
	<b>{#saved_product_properties_values#}</b>
	<table id="saved_values" class="ui-widget ui-widget-content" width="100%" border="0">
		<thead>
			<tr class="ui-widget-header ">
				{foreach from=$languages item=lang}
				<th>{$lang.name}</th>
				{/foreach}
				<th>&nbsp;</th>
				<th>{#price_brutto#}</th>
				<th>{#xy_percent_add#}</th>
				<th>{#product_property_sort_order#}</th>
				<th>{#input_span#}</th>
				<th>{#image#}</th>
				<th>&nbsp;</th>
			</tr>
		</thead>
		<tbody>
			{foreach from=$saved_values item=lang_values key=products_properties_values_id}
			<tr id="{$products_properties_values_id}">
				{foreach from=$lang_values item=val key=lk}
				<td class="title" id="{$lk}" valign="top">{$val.title}</td>
				{/foreach}
				<td valign="top" id="image">
				{assign var=val value=$lang_values.2}
				    {if $val.files_image != ''}
					<img id="img{$products_properties_values_id}" src="../files/{$val.files_image}" class="thmb_image" />
				    {else}
					<img id="img{$products_properties_values_id}" src="{if $val.image == ''}{$no_image_path}pixel_trans.gif{else}{$image_path}{$val.image}{/if}" class="thmb_image" />
				    {/if}
					<div class="statusimg" id="statusimg{$products_properties_values_id}">Aktualisiert</div>
				</td>
				<td align="right" valign="top" id="price">{$val.price}</td>
				<td align="right" valign="top" id="xy_percent_add">{$val.xy_percent_add}</td>
				<td align="right" valign="top" id="sort_order">{$val.sort_order}</td>
                                <td valign="top" id="input_span">{$val.input_span}</td>
				<td valign="top" id="image_input"><i>{#product#} {#image#}</i><br />
				    {$val.image_input}<br />
				    <b>oder</b> <i>{#image#} (files/)</i><br />
                                    <a href="javascript:;" id="{$PATH_TO_TINYMCE_FILEMANAGER}" class="tinymce_filemanager"><img src="images/basicons/file96.png" width="20" height="20" title="Filemanager" alt="Filemanager" /></a>
				    {$val.files_image_input}&nbsp;<img src="images/icon_save.gif" class="save_file_image" title="{#save#}" id="{$products_properties_values_id}" />
				</td>
				<td valign="top" id="action">
				    <a href="#add_product_properties_value_form" id="{$products_properties_values_id}" class="edit_products_properties_property_value"><img src="images/arrow_right.gif" title="{#edit#}" border="0" /></a>
				    &nbsp;
				    <a href="javascript:;" id="{$products_properties_values_id}" class="delete_products_properties_property_value"><img src="images/icons/cross.gif" title="{#delete#}" border="0" /></a>
				</td>
			</tr>
			{/foreach}
		</tbody>
	</table>
	</div>

</div>