<?php echo $header; ?>
<div id="content">
    <div class="breadcrumb">
        <?php foreach ($breadcrumbs as $breadcrumb) { ?>
            <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
        <?php } ?>
    </div>
    <?php if ($error_warning) { ?>
        <div class="warning"><?php echo $error_warning; ?></div>
    <?php } ?>
    <?php if ($success) { ?>
        <div class="success"><?php echo $success; ?></div>
    <?php } ?>
    <div class="box">
        <div class="heading">
            <h1><img src="view/image/flat-image/product.png" alt="" /> <?php echo $heading_title; ?></h1> 
            <select name="filter_category_id" style="font-size: 15px; margin-left: 15px;  margin-top: 10px; padding: 2px">
                <option value="">-- Todas as categorias --</option>
                <?php foreach ($all_categories as $category) { ?>
                    <?php
                    if ($category['category_id'] == $filter_category_id) {
                        $selected = ' selected="selected"';
                    } else {
                        $selected = '';
                    }
                    ?>
                    <option value="<?php echo $category['category_id']; ?>" <?php echo $selected; ?>><?php echo $category['name']; ?></option>
                <?php }; ?>
            </select>
            E/OU 

            <select name="filter_manufacturer_id" style="font-size: 15px; margin-left: 15px;  margin-top: 10px; padding: 2px">
                <option value="">-- Todos os fabricantes --</option>
                <?php foreach ($all_manufacturer as $manufacturer) { ?>
                    <?php
                    if ($manufacturer['manufacturer_id'] == $filter_manufacturer_id) {
                        $selected = ' selected="selected"';
                    } else {
                        $selected = '';
                    }
                    ?>
                    <option value="<?php echo $manufacturer['manufacturer_id']; ?>" <?php echo $selected; ?>><?php echo $manufacturer['name']; ?></option>
                <?php }; ?>
            </select>
            <div class="buttons"><a href="<?php echo $insert; ?>" class="button"><?php echo $button_insert; ?></a><a onclick="$('#form').attr('action', '<?php echo $copy; ?>');
                    $('#form').submit();" class="button"><?php echo $button_copy; ?></a><a onclick="$('form').submit();" class="button"><?php echo $button_delete; ?></a></div>
        </div>
        <div class="content">
            <form action="<?php echo $delete; ?>" method="post" enctype="multipart/form-data" id="form">
                <table class="list">
                    <thead>
                        <tr>
                            <td width="1" style="text-align: center;"><input type="checkbox" onclick="$('input[name*=\'selected\']').attr('checked', this.checked);" /></td>
                            <td class="center" style="width: 85px;"><?php echo $column_image; ?></td>
                            <td class="left" style="width: 200px;"><?php if ($sort == 'pd.name') { ?>
                                    <a href="<?php echo $sort_name; ?>" class="<?php echo strtolower($order); ?>"><?php echo $column_name; ?></a>
                                <?php } else { ?>
                                    <a href="<?php echo $sort_name; ?>"><?php echo $column_name; ?></a>
                                <?php } ?></td>
                            <td class="left" style="width: 70px;"><?php if ($sort == 'p.price') { ?>
                                    <a href="<?php echo $sort_price; ?>" class="<?php echo strtolower($order); ?>"><?php echo $column_price; ?></a>
                                <?php } else { ?>
                                    <a href="<?php echo $sort_price; ?>"><?php echo $column_price; ?></a>
                                <?php } ?></td>
                            <td class="left" style="width: 200px;" ><?php if ($sort == 'p.quantity') { ?>
                                    <a href="<?php echo $sort_quantity; ?>" class="<?php echo strtolower($order); ?>"><?php echo $column_quantity; ?></a>
                                <?php } else { ?>
                                    <a href="<?php echo $sort_quantity; ?>"><?php echo $column_quantity; ?></a>
                                <?php } ?></td>
                            <td class="left" ><small>product ID, sku, upc, ean, jan, isbn, mpn</small></td>
                            <td class="left"><?php if ($sort == 'p.status') { ?>
                                    <a href="<?php echo $sort_status; ?>" class="<?php echo strtolower($order); ?>"><?php echo $column_status; ?></a>
                                <?php } else { ?>
                                    <a href="<?php echo $sort_status; ?>"><?php echo $column_status; ?></a>
                                <?php } ?>
                            </td>
                            <td class="right"><?php echo $column_action; ?></td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="filter">
                            <td></td>
                            <td></td>
                            <td><input type="text" name="filter_name" style="width: 180px;" value="<?php echo $filter_name; ?>" /></td>
                            <td align="left"><input type="text" name="filter_price" value="<?php echo $filter_price; ?>" size="8"/></td>
                            <td align="left"><input type="text" name="filter_quantity" value="<?php echo $filter_quantity; ?>" style="text-align: right;" /></td>
                            <td align="left"><input type="text" name="filter_other" value="<?php echo $filter_other; ?>" /> </td>
                            <td><select name="filter_status">
                                    <option value="*"></option>
                                    <?php if ($filter_status) { ?>
                                        <option value="1" selected="selected"><?php echo $text_enabled; ?></option>
                                    <?php } else { ?>
                                        <option value="1"><?php echo $text_enabled; ?></option>
                                    <?php } ?>
                                    <?php if (!is_null($filter_status) && !$filter_status) { ?>
                                        <option value="0" selected="selected"><?php echo $text_disabled; ?></option>
                                    <?php } else { ?>
                                        <option value="0"><?php echo $text_disabled; ?></option>
                                    <?php } ?>
                                </select></td>

                            <td align="right"><a onclick="filter();" class="button"><?php echo $button_filter; ?></a></td>
                        </tr>
                        <?php if ($products) { ?>
                            <?php foreach ($products as $product) { ?>
                                <tr>
                                    <td class="product-id" style="text-align: center;"><?php if ($product['selected']) { ?>
                                            <input type="checkbox" name="selected[]" value="<?php echo $product['product_id']; ?>" checked="checked" />
                                        <?php } else { ?>
                                            <input type="checkbox" name="selected[]" value="<?php echo $product['product_id']; ?>" />
                                        <?php } ?></td>
                                    <td class="center">
                                        <img id="thumb-<?php echo $product['product_id']; ?>" src="<?php echo $product['image']; ?>" alt="<?php echo $product['name']; ?>" style="padding: 1px; border: 1px solid #DDDDDD; width: 80px ; height: 80px"  />
                                        <div style="padding-top: 5px; padding-bottom: 5px;"><a class="upload-image" onclick="image_upload('image-src-<?php echo $product['product_id']; ?>', 'thumb-<?php echo $product['product_id']; ?>');">Click para editar</a></div>
                                        <input type="hidden" name="image-src-<?php echo $product['product_id']; ?>" rel='<?php echo $product['product_id']; ?>'  id="image-src-<?php echo $product['product_id']; ?>" />
                                    </td>
                                    <td class="left"><span data-action='name' class="editable"><?php echo $product['name']; ?></span><br />
                                        <small>(<span data-action='model' class="editable"><?php echo $product['model']; ?></span>)</small>
                                        <br /> 
                                        <div style="padding-top: 5px; padding-bottom: 5px;">
                                            Fabricantes:  <?php
                                            if (isset($product['manufacturer']['name'])) {
                                                echo '<span data-action="manufacturer" class="ajax_manufacturer">' . $product['manufacturer']['name'] . '</span>';
                                            } else {
                                                echo '<span data-action="manufacturer" class="ajax_manufacturer">Adicionar</span>';
                                            }
                                            ?>
                                        </div>
                                        <div style="border: 1px solid #DDDDDD ; margin-top: 6px;"> Categorias: <br />

                                            <div  id="product-category-id-<?php echo $product['product_id']; ?>" style="height: 80px" class="scrollbox product-category">
                                                <?php $class = 'odd'; ?>
                                                <?php foreach ($product['categories'] as $value) { ?>
                                                    <?php $class = ($class == 'even' ? 'odd' : 'even'); ?>
                                                    <div id="product-category-<?php echo $product['product_id']; ?>-<?php echo $value['category_id']; ?>" class="<?php echo $class; ?>"><?php echo $value['name']; ?><img rel="<?php echo $product['product_id']; ?>" src="view/image/delete.png" alt="" />
                                                        <input type="hidden" name="product_category[]" value="<?php echo $value['category_id']; ?>" />
                                                    </div>
                                                <?php } ?>

                                            </div>
                                            <div style="margin:3px;"> Add categoria: <input type="text" id='input-category-<?php echo $product['product_id']; ?>' rel='<?php echo $product['product_id']; ?>' name="categoria" value="" /></div> 
                                        </div>

                                    </td>

                                    <td class="left"><?php if ($product['special']) { ?>
                                            <span  data-action='price' class="editable" style="text-decoration: line-through;"><?php echo $product['price']; ?></span><br/>
                                            <span data-action='special' class="editable" style="color: #b00;"><?php echo $product['special']; ?></span>
                                        <?php } else { ?>
                                            <span data-action='price' class="editable"><?php echo $product['price']; ?></span>
                                        <?php } ?></td>
                                    <td class="left" style="vertical-align: top;">
                                        Estoque: 
                                        <?php if ($product['quantity'] <= 0) { ?>
                                            <span data-action='quantity' class="editable" style="color: #FF0000;"><?php echo $product['quantity']; ?></span>
                                        <?php } elseif ($product['quantity'] <= 5) { ?>
                                            <span data-action='quantity' class="editable" style="color: #FFA500;"><?php echo $product['quantity']; ?></span>
                                        <?php } else { ?>
                                            <span data-action='quantity' class="editable" style="color: #008000;"><?php echo $product['quantity']; ?></span>
                                        <?php } ?>
                                        <?php
                                        if (isset($product['product_options']) && count($product['product_options']) > 0) {
                                            // count 
                                            $count_opt = 0;
                                            foreach ($product['product_options'] as $value) {
                                                if ($value['type'] == 'select' || $value['type'] == 'radio' || $value['type'] == 'checkbox' || $value['type'] == 'image') {
                                                    $count_opt++;
                                                }
                                            }
                                            if ($count_opt != 0) {
                                                ?>

                                                <div style="padding: 5px 0px;" >
                                                    Options Qty: <br />
                                                    <div style="height: 110px" class="scrollbox">
                                                        <?php foreach ($product['product_options'] as $value) { ?>
                                                            <?php if ($value['type'] == 'select' || $value['type'] == 'radio' || $value['type'] == 'checkbox' || $value['type'] == 'image') { ?>
                                                                <div style="padding: 2px 5px"><?php echo $value['name']; ?></div>
                                                                <div style="padding: 2px 8px">
                                                                    <table class="list" style="margin-bottom: 5px;">

                                                                        <?php
                                                                        if (isset($value['product_option_value']) && count($value['product_option_value']) > 0) {
                                                                            foreach ($value['product_option_value'] as $product_option_value) {
                                                                                ?>
                                                                                <tr>
                                                                                    <?php
                                                                                    foreach ($product['option_values'][$value['option_id']] as $row) {
                                                                                        if ($row['option_value_id'] == $product_option_value['option_value_id']) {
                                                                                            echo '<td>' . $row['name'] . '</td>';
                                                                                            break;
                                                                                        }
                                                                                    }
                                                                                    echo '<td>';
                                                                                    ?>
                                                                                    <?php if ($product_option_value['quantity'] <= 0) { ?>
                                                                                    <span data-action='quantityExt' data-optionid='<?php echo $product_option_value['option_value_id']; ?>' class="editableQTY"  style="color: #FF0000;"><?php echo $product_option_value['quantity']; ?></span>
                                                                                <?php } elseif ($product_option_value['quantity'] <= 5) { ?>
                                                                                    <span data-action='quantityExt' data-optionid='<?php echo $product_option_value['option_value_id']; ?>' class="editableQTY"  style="color: #FFA500;"><?php echo $product_option_value['quantity']; ?></span>
                                                                                <?php } else { ?>
                                                                                    <span data-action='quantityExt' data-optionid='<?php echo $product_option_value['option_value_id']; ?>' class="editableQTY"  style="color: #008000;"><?php echo $product_option_value['quantity']; ?></span>
                                                                                <?php } ?></td>
                                                                                </tr>
                                                                            <?php } ?>

                                                                        <?php } ?>

                                                                    </table>
                                                                </div>
                                                                <?php
                                                            }
                                                        }
                                                        ?>
                                                    </div></div>
                                                <?php
                                            }
                                        }
                                        ?>


                                    </td>
                                    <td class="left" style="vertical-align: top;"><?php
                                        if (count($product['other_info']) > 0) {
                                            foreach ($product['other_info'] as $key_other_info => $other_info) {
                                                if ($key_other_info != 'product_id') {
                                                    echo ${"entry_$key_other_info"} . '  <span data-action="' . $key_other_info . '" class="editable">' . $other_info . '</span><br />';
                                                } else {
                                                    echo ${"entry_$key_other_info"} . ' ' . $other_info . '<br />';
                                                }
                                            }
                                        }
                                        ?></td>
                                    <td class="left"><span class='quick-status'><?php echo $product['status']; ?></span></td>
                                    <td class="right"><?php foreach ($product['action'] as $action) { ?>
                                            [ <a href="<?php echo $action['href']; ?>" target="<?php echo $action['target']; ?>"><?php echo $action['text']; ?></a> ] <br />
                                        <?php } ?></td>
                                </tr>
                            <?php } ?>
                        <?php } else { ?>
                            <tr>
                                <td class="center" colspan="8"><?php echo $text_no_results; ?></td>
                            </tr>
                        <?php } ?>
                    </tbody>
                </table>
            </form>
            <div class="pagination"><?php echo $pagination; ?></div>
        </div>
    </div>
</div>
<script type="text/javascript"><!--
    var ajax_edit_url = '<?php echo str_ireplace("amp;", "", $ajax_edit); ?>';
    $('span.quick-status').hover(function() {
        $(this).css('cursor', 'pointer').css('background-color', 'grey');
    }, function() {
        $(this).css('background-color', '');
    });
    $('span.ajax_manufacturer').hover(function() {
        $(this).css('cursor', 'pointer').css('background-color', 'grey');
    }, function() {
        $(this).css('background-color', '');
    });

    $('span.ajax_manufacturer').on('click', function() {
        var elm = $(this);

        if ($(this).find('select').length === 0) {
            var manufacturerSelect = $('select[name="filter_manufacturer_id"]').clone();
            manufacturerSelect.attr('name', 'manufacturer_id');

            elm.hide()
                    .after(manufacturerSelect)
                    .siblings('select[name="manufacturer_id"]').focus();

        }
    });

    $('select[name="manufacturer_id"]').live('keydown', function(e) {
        var elm = $('select[name="manufacturer_id"]'),
                elm_span = $('select[name="manufacturer_id"]').prev('span');
        var product_id = elm_span.closest('tr').find('td.product-id').find('input').val();
        switch (e.keyCode) {
            case 13: /*enter key*/
                var value = elm.val(),
                        action = elm_span.data('action');

                $.ajax({
                    url: '<?php echo str_ireplace("amp;", "", $ajax_edit); ?>',
                    type: 'POST',
                    data: {'product_id': product_id, 'action': action, 'value': value},
                    beforeSend: function() {
                        elm.siblings('.waiting-ajax-edit').remove();
                        elm.after('<img class="waiting-ajax-edit" src="view/image/loading.gif">');
                    },
                    success: function(result) {

                        if (result === '1') {
                            elm_span.text($('select[name="manufacturer_id"] option:selected').text())
                                    .show();
                            elm.siblings('.waiting-ajax-edit').remove();
                            elm.remove();


                        } else {
                            alert(result);
                        }

                    }
                })

                break;
            case 27: /*esc key*/
                elm_span.show();
                elm.remove();
                break;
            default:
        }
    });


    $('span.quick-status').on('click', function() {
        var elm = $(this);
        var product_id = elm.closest('tr').find('td.product-id').find('input').val();
        if (elm.text() == '<?php echo $text_enabled; ?>') {
            var value = '0';
        } else {
            var value = '1';
        }
        $.ajax({
            url: ajax_edit_url,
            type: 'POST',
            data: {'product_id': product_id, 'action': 'status', 'value': value},
            beforeSend: function() {
                elm.siblings('.waiting-ajax-edit').remove();
                elm.after('<img class="waiting-ajax-edit" src="view/image/loading.gif">');
            },
            success: function(result) {
                if (result === '1') {
                    if (value === '0') {
                        elm.text('<?php echo $text_disabled; ?>');
                    } else {
                        elm.text('<?php echo $text_enabled; ?>');
                    }
                } else {
                    alert(result);
                }
                elm.siblings('.waiting-ajax-edit').remove();
            }
        })
    });


    $('span.editable').hover(function() {
        $(this).css('cursor', 'pointer').css('background-color', 'grey');
    }, function() {
        $(this).css('background-color', '');
    });

    $('span.editableQTY').hover(function() {
        $(this).css('cursor', 'pointer').css('background-color', 'grey');
    }, function() {
        $(this).css('background-color', '');
    });

    $('span.editableQTY').on('click', function() {
        var elm = $(this);
        if ($(document).find('input[name="ajax-quick-input-qty"]').length === 0) {
            if (elm.hasClass('editableQTY')) {
                elm.hide()
                        .after('<input type="text" name="ajax-quick-input-qty" value="' + elm.text().replace('"', '&quot;') + '">')
                        .siblings('input[name="ajax-quick-input-qty"]').focus();
            }
        }

    });

    $("input[name='ajax-quick-input-qty']").live('keydown', function(e) {
        var elm = $("input[name='ajax-quick-input-qty']"),
                elm_span = $("input[name='ajax-quick-input-qty']").prev('span');
        var product_id = elm_span.closest('table').closest('tr').find('td.product-id').find('input').val();
        switch (e.keyCode) {
            case 13: /*enter key*/
                var value = elm.val(),
                        action = elm_span.data('action');
                optionid = elm_span.data('optionid');
                if (value === '') {
                    alert('Error: empty value');
                    return false;
                }

                $.ajax({
                    url: '<?php echo str_ireplace("amp;", "", $ajax_edit); ?>',
                    type: 'POST',
                    data: {'product_id': product_id, 'action': action, 'value': value, 'option_id': optionid},
                    beforeSend: function() {
                        elm.siblings('.waiting-ajax-edit').remove();
                        elm.after('<img class="waiting-ajax-edit" src="view/image/loading.gif">');
                    },
                    success: function(result) {

                        if (result === '1') {
                            elm_span.text(elm.val())
                                    .show();
                            elm.siblings('.waiting-ajax-edit').remove();
                            elm.remove();


                        } else {
                            alert(result);
                        }

                    }
                })

                break;
            case 27: /*esc key*/
                elm_span.show();
                elm.remove();
                break;
            default:
        }
    });

    $('span.editable').on('click', function() {
        var elm = $(this);
        if ($(document).find('input[name="ajax-quick-input"]').length === 0) {
            if (elm.hasClass('editable')) {
                elm.hide()
                        .after('<input type="text" name="ajax-quick-input" value="' + elm.text().replace('"', '&quot;') + '">')
                        .siblings('input[name="ajax-quick-input"]').focus();
            }
        }

    });


    $("input[name='ajax-quick-input']").live('keydown', function(e) {
        var elm = $("input[name='ajax-quick-input']"),
                elm_span = $("input[name='ajax-quick-input']").prev('span');
        var product_id = elm_span.closest('tr').find('td.product-id').find('input').val();
        switch (e.keyCode) {
            case 13: /*enter key*/


                var value = elm.val(),
                        action = elm_span.data('action');

                if (value === '') {
                    alert('Error: empty value');
                    return false;
                }

                $.ajax({
                    url: '<?php echo str_ireplace("amp;", "", $ajax_edit); ?>',
                    type: 'POST',
                    data: {'product_id': product_id, 'action': action, 'value': value},
                    beforeSend: function() {
                        elm.siblings('.waiting-ajax-edit').remove();
                        elm.after('<img class="waiting-ajax-edit" src="view/image/loading.gif">');
                    },
                    success: function(result) {

                        if (result === '1') {
                            elm_span.text(elm.val())
                                    .show();
                            elm.siblings('.waiting-ajax-edit').remove();
                            elm.remove();


                        } else {
                            alert(result);
                        }

                    }
                })

                break;
            case 27: /*esc key*/
                elm_span.show();
                elm.remove();
                break;
            default:
        }
    });

    $('select[name=\'filter_category_id\']').change(function() {
        url = 'index.php?route=catalog/super_product&token=<?php echo $token; ?>';

        var filter_category_id = $('select[name=\'filter_category_id\']').attr('value');
        if (filter_category_id) {
            url += '&filter_category_id=' + encodeURIComponent(filter_category_id);
        }

        location = url;
    });

    $('select[name=\'filter_manufacturer_id\']').change(function() {
        url = 'index.php?route=catalog/super_product&token=<?php echo $token; ?>';

        var filter_manufacturer_id = $('select[name=\'filter_manufacturer_id\']').attr('value');
        if (filter_manufacturer_id) {
            url += '&filter_manufacturer_id=' + encodeURIComponent(filter_manufacturer_id);
        }

        location = url;
    });


    function filter() {
        url = 'index.php?route=catalog/super_product&token=<?php echo $token; ?>';

        var filter_name = $('input[name=\'filter_name\']').attr('value');

        if (filter_name) {
            url += '&filter_name=' + encodeURIComponent(filter_name);
        }

        var filter_other = $('input[name=\'filter_other\']').attr('value');

        if (filter_other) {
            url += '&filter_other=' + encodeURIComponent(filter_other);
        }

        var filter_category_id = $('select[name=\'filter_category_id\']').attr('value');
        if (filter_category_id) {
            url += '&filter_category_id=' + encodeURIComponent(filter_category_id);
        }

        var filter_manufacturer_id = $('select[name=\'filter_manufacturer_id\']').attr('value');
        if (filter_manufacturer_id) {
            url += '&filter_manufacturer_id=' + encodeURIComponent(filter_manufacturer_id);
        }


        var filter_model = $('input[name=\'filter_model\']').attr('value');

        if (filter_model) {
            url += '&filter_model=' + encodeURIComponent(filter_model);
        }

        var filter_price = $('input[name=\'filter_price\']').attr('value');

        if (filter_price) {
            url += '&filter_price=' + encodeURIComponent(filter_price);
        }

        var filter_quantity = $('input[name=\'filter_quantity\']').attr('value');

        if (filter_quantity) {
            url += '&filter_quantity=' + encodeURIComponent(filter_quantity);
        }

        var filter_status = $('select[name=\'filter_status\']').attr('value');

        if (filter_status != '*') {
            url += '&filter_status=' + encodeURIComponent(filter_status);
        }

        location = url;
    }
//--></script> 
<script type="text/javascript"><!--
$('#form input').keydown(function(e) {
        if (e.keyCode == 13) {
            filter();
        }
    });
//--></script> 
<script type="text/javascript"><!--
$('input[name=\'filter_name\']').autocomplete({
        delay: 500,
        source: function(request, response) {
            $.ajax({
                url: 'index.php?route=catalog/super_product/autocomplete&token=<?php echo $token; ?>&filter_name=' + encodeURIComponent(request.term),
                dataType: 'json',
                success: function(json) {
                    response($.map(json, function(item) {
                        return {
                            label: item.name,
                            value: item.product_id,
                            imgsrc: item.image,
                            model: item.model
                        }
                    }));
                }
            });
        },
        select: function(event, ui) {
            $('input[name=\'filter_name\']').val(ui.item.label);

            return false;
        },
        focus: function(event, ui) {
            return false;
        }
    }).data("autocomplete")._renderItem = function(ul, item) {
        return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a class=\"better_autocomplete\"><img src=\"" + item.imgsrc + "\" /><div class=\"better_autocomplete_text\">" + item.label + "<br /><small>(" + item.model + ")</small></div></a>")
                .appendTo(ul);
    };


    $.widget('custom.catcomplete', $.ui.autocomplete, {
        _renderMenu: function(ul, items) {
            var self = this, currentCategory = '';

            $.each(items, function(index, item) {
                if (item.category != currentCategory) {
                    ul.append('<li class="ui-autocomplete-category">' + item.category + '</li>');

                    currentCategory = item.category;
                }

                self._renderItem(ul, item);
            });
        }
    });

// Category
    $('input[name=\'category\']').autocomplete({
        minLength: 0, delay: 200,
        source: function(request, response) {
            $.ajax({
                url: 'index.php?route=catalog/category/autocomplete&token=<?php echo $token; ?>&filter_name=' + encodeURIComponent(request.term),
                dataType: 'json',
                success: function(json) {
                    response($.map(json, function(item) {
                        return {
                            label: item.name,
                            value: item.category_id
                        }
                    }));
                }
            });
        },
        select: function(event, ui) {
            var id = $(this).attr('rel');
            $('#product-category-' + id + '-' + ui.item.value).remove();

            $('#product-category-id-' + id).append('<div id="product-category-' + id + '-' + ui.item.value + '">' + ui.item.label + '<img src="view/image/delete.png" rel="' + id + '" alt="" /><input type="hidden" name="product_category[]" value="' + ui.item.value + '" /></div>');

            var categories = new Array();
            var i = 0;
            $('#product-category-id-' + id + ' div').each(function(index) {
                var input = $(this).find('input').attr('value');
                categories[i] = input;
                i++;
            });

            $.ajax({
                url: ajax_edit_url,
                type: 'POST',
                data: {'product_id': id, 'action': 'category', 'value': categories.join(',')},
                beforeSend: function() {
                    $('#input-category-' + id).siblings('.waiting-ajax-edit').remove();
                    $('#input-category-' + id).after('<img class="waiting-ajax-edit" src="view/image/loading.gif">');
                },
                success: function(result) {
                    if (result === '1') {
                    } else {
                        alert(result);
                    }
                    $('#input-category-' + id).siblings('.waiting-ajax-edit').remove();
                }
            });

            $('#product-category-id-' + id + ' div:odd').attr('class', 'odd');
            $('#product-category-id-' + id + ' div:even').attr('class', 'even');

            return false;
        },
        focus: function(event, ui) {
            return false;
        }
    });

    $('.product-category div img').live('click', function() {
        $(this).parent().remove();
        var relT = $(this).attr('rel');
        var id = relT;
        $('#product-category-id-' + relT + ' div:odd').attr('class', 'odd');
        $('#product-category-id-' + relT + ' div:even').attr('class', 'even');

        var categories = new Array();
        var i = 0;
        $('#product-category-id-' + id + ' div').each(function(index) {
            var input = $(this).find('input').attr('value');
            categories[i] = input;
            i++;
        });

        $.ajax({
            url: ajax_edit_url,
            type: 'POST',
            data: {'product_id': id, 'action': 'category', 'value': categories.join(',')},
            beforeSend: function() {
                $('#input-category-' + id).siblings('.waiting-ajax-edit').remove();
                $('#input-category-' + id).after('<img class="waiting-ajax-edit" src="view/image/loading.gif">');
            },
            success: function(result) {
                if (result === '1') {
                } else {
                    alert(result);
                }
                $('#input-category-' + id).siblings('.waiting-ajax-edit').remove();
            }
        });
    });

    $('input[name=\'category\']').click(function() {
        $(this).autocomplete("search");
    });


    function image_upload(field, thumb) {
        $('#dialog').remove();
        $('#content').prepend('<div id="dialog" style="padding: 3px 0px 0px 0px;"><iframe src="index.php?route=common/filemanager&token=<?php echo $token; ?>&field=' + encodeURIComponent(field) + '" style="padding:0; margin: 0; display: block; width: 100%; height: 100%;" frameborder="no" scrolling="auto"></iframe></div>');
        $('#dialog').dialog({
            title: '<?php echo $text_image_manager; ?>',
            close: function(event, ui) {
                if ($('#' + field).attr('value')) {
                    $.ajax({
                        url: 'index.php?route=common/filemanager/image&token=<?php echo $token; ?>&image=' + encodeURIComponent($('#' + field).attr('value')),
                        dataType: 'text',
                        success: function(text) {
                            var image_url = $('#' + field).attr('value');

                            $.ajax({
                                url: ajax_edit_url,
                                type: 'POST',
                                data: {'product_id': $('#' + field).attr('rel'), 'action': 'image', 'value': image_url},
                                beforeSend: function() {
                                    $('#' + field).siblings('.waiting-ajax-edit').remove();
                                    $('#' + field).after('<img class="waiting-ajax-edit" src="view/image/loading.gif">');
                                },
                                success: function(result) {
                                    if (result === '1') {
                                    } else {
                                        alert(result);
                                    }
                                    $('#' + field).siblings('.waiting-ajax-edit').remove();
                                }
                            });
                            $('#' + thumb).replaceWith('<img src="' + text + '" alt="" style="padding: 1px; border: 1px solid #DDDDDD; width: 80px ; height: 80px" id="' + thumb + '" />');
                        }
                    });
                }
            },
            bgiframe: false,
            width: 800,
            height: 400,
            resizable: false,
            modal: false
        });
    }
    ;
//--></script> 
<style type="text/css" >
    .ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all{
        width: 320px !important;  
        height: 250px !important;
        overflow: scroll;
    }

    .better_autocomplete_text{
        height: 41px;
        margin-left: 50px;
        margin-top: -44px;
    }
</style>
<?php echo $footer; ?>