$(document).ready(function() {
    var id = '#';
    var url = '';
    var page = 1;
    var pages = 1;
    // set first page for every page reload / refresh
    $('.miniNavigator input[name=currentPage]').attr('value', page);
    $('.miniNavigator .next, .miniNavigator .previous').click(function() {
        id = ('#' + $(this).parents('.recomendedContainer').attr('id')).toString();
        pages = Number($(id + ' .miniNavigator input[name=pages]').attr('value'));
        if (1 == pages) {
            return;
        }
        url = $(id + ' .miniNavigator input[name=url]').attr('value');
        page = Number($(id +  ' .miniNavigator input[name=currentPage]').attr('value'));
        if ($(this).hasClass('next')) {
            if (pages > page) {
                page++;
            } else {
                page = 1;
            }
        } else {
            if (1 < page) {
                page--;
            } else {
                page = pages;
            }
        }
        updateRecomended(id, page, url);
    });
   var cache = {},
            lastXhr;
   $('#hotelName').autocomplete({
        minLength: 3,
        source: function( request, response ) {
            var term = request.term;
            if ( term in cache ) {
                response( cache[ term ] );
                return;
            }
            var src = $('#findHotelUrl').val() + '?ts=' + $('#tsSelector option:selected').val() + '&stars=' + $('#stars option:selected').val();
            lastXhr = $.getJSON( src, request, function( data, status, xhr ) {
                cache[ term ] = data;
                if ( xhr === lastXhr ) {
                    response( data );
                }
            });
        },
        focus: function( event, ui ) {
                $( "#hotelName" ).val( ui.item.label );
                return false;
         },
         search: function(event, ui) {
            src = $('#findHotelUrl').val() + '?ts=' + $('#tsSelector option:selected').val() + '&stars=' + $('#stars option:selected').val();
            $(this).autocomplete( "option", "source", src);
            $('#hotelName').addClass("ui-autocomplete-loading");
                    console.log($(this));
        },
        select: function( event, ui ) {
            $( "#hotelName" ).val( ui.item.label );
            var slugs = ui.item.value.split(':');
            window.location = $('#hotelLink').val().replace('{TS}', slugs[0]).replace('{SLUG}', slugs[1]);
            return false;
        }
    });

});

function updateRecomended(id, page, url) {
    $.ajax({
          url: url,
          data: {'page': page},
          cache: false,
          beforeSend: function(xmlHttpRequest) {
                $(id + ' .indicator').show();
          },
          success: function(data) {
            $(id + ' .recomendedInfoContainer').html(data);
            $(id + ' .miniNavigator input[name=currentPage]').attr('value', page);
          },
          complete: function(xmlHttpRequest) {
                $(id + ' .indicator').hide();
          }
     });
};