$(document).ready(function() {

var page = 1;

        $('#color' ).change( function() {
            ajaxResponse(page);
        });

        $('#size' ).change( function() {
            ajaxResponse(page);
        });

        $('#order' ).change( function() {
            ajaxResponse(page);
        });

        $(document).on( 'click', '.nav li', function() {

            var $page = $(this).val();

            if ($page == undefined && $page == "") $page = 1;

            ajaxResponse($page);
        });

});

function ajaxResponse(page) {

                var $color = $('#color').val();
                var $size = $('#size').val();
                var $order = $('#order').val();
                var $url = $("#searchAjaxProduct").val();

                if (page == undefined && page == "") $page = 1;
                else $page = page;

                alert($page);

                $.post($url, { color: $color, size: $size, order: $order, page: $page},
                    function(data){
                        if(data.length > 0) {

                            var product = '<section id="content">';

                               for(var i = 0; i < data.length; i++){

                                var obj = jQuery.parseJSON(data);

                                    product += '<section class="pbox"><article class="img"><img src="images/'+ obj.kep +'" alt="cipő" /></article>';

                                    product += '<article class="info"><p>'+ obj.nev +'</p><p>'+ obj.marka  +'</p>';

                                    product += (obj.regi_ar > 0) ?  '<p class="old">'+ obj.regi_ar +'</p><p class="new">'+ obj.uj_ar +'</p></article></section>' : '<p class="new">'+ obj.uj_ar +'</p></article></section>';
                                }

                                pager = "<ul id='pager'><li value='1'>Első</li><li value='" + ( (obj.page > 1 ) ? obj.page - 1 : 1 ) +"'>Előző</li>";
                                pager += "<p>"+ obj.page +"/"+ obj.maxpage +"</p> ";
                                pager += "<li value='"+ ( ( (obj.page + 1) > obj.maxpage) ? obj.maxpage : obj.page + 1 ) +"'>Következő</li> ";
                                pager += "<li value='"+ (obj.maxpage) +"'>Utolsó</li></ul> ";

                        $('.nav article').empty().append( pager );
                        $('#product').empty().append( product );

                        }

                    });
}