$(document).ready(function(){

$('.warning').remove();

​

/* Session Model */

var Session = Backbone.Model.extend({

    urlRoot : 'rest/rest/checkZip',

    methodToURL: {

        create: 'rest/rest/checkZip'

    },

    sync: function(method, model, options) {

        options = options || {};

        var end = '';

        if(method == "create"){

                end = "?zip="+$('.input').val();

    };

    options.url = model.methodToURL[method.toLowerCase()]+end;

    Backbone.sync(method, model, options);

}

});

​

/* Session View */

var SessionUser = Backbone.View.extend({

    events:{

    'click .messageBubble': 'checkZip'

    },

    checkZip: function(ev,e){

​

        if(this.validate(ev)){

​

            var zipCheck = new Session({zip:parseInt(e.currentTarget.value)});

            $('.messageBubble').css('backgroundColor','#fff');

​

        } else {

​

            $('.messageBubble').css('backgroundColor','rgba(255,0,0,.3)');

            return;

        };

​

        var options = '';

​

        response = [

        {ZipCode:21654,State:'MD',City:'Oxford'},

        {ZipCode:33442,State:'FL',City:'Deerfield Beach'},

        {ZipCode:90210,State:'CA',City:'Hollywood'}

        ];

​

        for (var i = response.length-1; i > -1; i--) {

            console.log(response,i);

            options += '<div class="option" zip="'+response[i].ZipCode+'" state="'+response[i].State+'" city="'+response[i].City+'">'+response[i].ZipCode+'</div>';

        };

​

        $('.optionDropDown').html('').append(options);

     /* 

     This would request the restful api and return back a list of the

     the most relevant zip codes to what you searched, I hard coded the response

     here to show the functionality

     */

       // zipCheck.save({},{

       //      wait:true,

       //          success: function(model, response, options) {

       //              if(typeof response != 'undefined'){

       //                  console.log(response,model,response);

       //              $('.value').text(response[0].City+', '+response[0].State);

​

       //              var options = '';

​

       //              for (var i = response.length-1; i > 0; i--) {

       //                  options += '<div class="option" zip="'+response[i].ZipCode+'" state="'+response[i].State+'" city="'+response[i].City+'">'+response[i].ZipCode+'</div>';

       //              };

       //                  $('.optionDropDown').html('').append(options);

​

       //              } else {

       //                  $('.value').text("We didn't recognize that zip code");

       //              };

       //          //$('.value').text(response[0]\.city+', '+response[0].state);

​

       //      },

       //          error: function(model, error) {

       //           /* The user does not have a session/valid session. */

       //              console.log(error);

       //          }

       //      });

                 return false;

     },

    validate : function(num){

​

       var num = num.split('');

       var regex = new RegExp(/^[\d-\s]/);

​

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

            if(regex.test(num[i]) == false){

                return false;

            };

       };

​

       return true;

    },

    validatePressed: function(){

        /* We weren't intereseted in some characters, since

        this was looking for zip codes */

        var checked = arguments[0];

​

        for (var i = arguments.length-1; i != 1; i--) {

            var negativeCheck = false;

​

            if(arguments[i].indexOf('!') != -1){

                arguments[i] = arguments[i].substring(1);

                var negativeCheck = true;

            };

​

            if(constants.keys[arguments[i]] == checked){

                    if(negativeCheck){

                        return true; // matched an invalid key

                    };

​

                    return true; // matched a valid key

            };

        };

​

        return false;

​

    },

    checkPressed : function(max,e,press){ 

        if(constants.bodyListener.active){

            return

        };

​

        var keys = constants.keys,

        pshBtn = e.which,

        parTarg = $('input'),

        leng = parTarg.val().length;

​

        if(press == 'keyup'){

            this.checkZip(parTarg.val(),e);

            return;

        };

​

        if( true !== (this.validatePressed(pshBtn,'!up','!down','!left','!right','!delete','enter')) && leng > max){

            e.preventDefault();

        } else if(pshBtn !== keys.up){ 

            if(this.validatePressed(pshBtn,'enter','down','tab')){

                parTarg.blur();

                constants.bodyListener.active = true;

            } else if(this.validatePressed(pshBtn,'!right','!left')){

                $('.optionDropDown').html('');

            };

        };

    },

    jumpOptions : function(e,pos,value){

​

        if(!constants.bodyListener.active){

            /* You aren't going through your current options */

            return;

        };  

​

        var keys = constants.keys,

        pshBtn = e.which,

        targ = $('.highlight'),

        parTarg = $('.input');

​

        if(targ.length == 0){

            parTarg.next('.optionDropDown').children('div').first().addClass('highlight');

            return;

        };

​

        parTarg.blur();

​

        if((pshBtn == keys.down || pshBtn == keys.tab) && targ.next('div').length !== 0){

            //Hit down // tab && not on last option

            targ.removeClass('highlight').next('div').addClass('highlight');

        } else if (pshBtn == keys.up && targ.prev('div').length == 0) {

            //Hit up on the first option

            parTarg.focus();

            targ.removeClass('highlight');

            constants.bodyListener.active = false;

​

        } else if (pshBtn == keys.up && targ.prev('div').length !== 0) {

            //Hit up on not the top one

            targ.removeClass('highlight').prev('div').addClass('highlight');

        } else if (pshBtn == keys.enter){

            //Hit enter

            constants.bodyListener.active = false;

​

            constants.zip = targ.attr('zip'),

            constants.state = targ.attr('state'),

            constants.city = targ.attr('city');

​

            $('.value').text(constants.city+', '+constants.state+' '+constants.zip);

            $('.input').val(constants.zip).focus();

            $(".optionDropDown").html('');

​

        };

​

        var height = $(".highlight").height();    

        var pos = $(".highlight").index();    

        $(".optionDropDown").stop(false,true).animate({scrollTop: pos*height},500);

    }

});

​

var constants = {

    zip : '',

    state : 'ca',

    city: '',

    views :  new SessionUser(),

    max: {

        zip:4}

        ,

    keys:{

        enter:13,

        down:40,

        up:38,

        left:37,

        right:39,

        tab:9,

        delete:8,

        backspace:8

    },

    bodyListener:{

        active:false

    }   

};   

​

    $('body').keydown(function(e){ 

        constants.views.jumpOptions(e,'454'); 

    });

​

    $('.input').keydown(function(e){ 

        constants.views.checkPressed(constants.max.zip, e,'keydown'); 

    });

​

    $('.input').keyup(function(e){ 

        constants.views.checkPressed(constants.max.zip, e,'keyup'); 

    });

​

    $('.input').on('click',function(){

        if($('.input').val() == 00000){

            $('.input').val('');return;

        }; // Initial reset (Make this into a click / unbind?)

        $(this).unbind('click');

    });

​

});

​