$(document).ready(function() {
  $(".mapitem").mapItem();
  $(".service form.frm").jsonform({
    controller:'dealer',
    action:'service',
    clearFormOnSuccess : true,
    response : function(j) {
      if(j.ok) {
        $(".success").show(500, function() {
          var t = setTimeout(function() {
             $(".success").hide(500);
          },5000)
        });
      }

    }
  });
});
$.fn.mapItem = function() {
  var citydetails = new Array();
  var dealerdetails = new Array();
  var dealerhtml = '';
  return this.each(function() {
    var item = $(this);
    var id = $(this).attr("id").substr(4);
    var onitem = false;
    var onextra = false;
    var extra = $("#extra_" + id);

    item.click(function() {
      displayDealer({
        'city' : id,
        'type' : 'city'
      });
      return false;
    });

    item.parent().parent().find("#extra_" + id).find("a.dealer").click(function() {
      var dealer = $(this).attr("id").substr(7);
      displayDealer({
        'dealer' : dealer,
        'type' : 'dealer'
      });
      return false;
    });

    if(extra.length > 0) {
      item.mouseenter(function() {
        extra.show();
        onitem = true;
      });

      item.mouseleave(function() {
        onitem = false;
        t = setTimeout(function() {
          if(!onextra && !onitem) {
            extra.hide();
          }
        }, 300);
      });

      extra.mouseenter(function() {
        onextra = true;
      });

      extra.mouseleave(function() {
        onextra = false;
        t = setTimeout(function() {
          if(!onextra && !onitem) {
            extra.hide();
          }
        }, 300);
      });
    }
  });

  function displayDealer(options) {
    if(options.type == 'city' && citydetails[options.city]) {
      dealerhtml = citydetails[options.city].dealerhtml;
      $("div.sideinfo").html(dealerhtml);
      serviceForm(citydetails[options.city].dealer.id);
    } else if(options.type == 'dealer' && dealerdetails[options.dealer]) {
      dealerhtml = dealerdetails[options.dealer].dealerhtml;
      $("div.sideinfo").html(dealerhtml);
      serviceForm(dealerdetails[options.dealer].dealer.id);
    } else {
      $.json('dealer', 'details', options, function(j) {
        if(j.status == 'ok') {
          dealerhtml = j.dealerhtml;
          $("div.sideinfo").html(dealerhtml).slideDown(400);
          serviceForm(j.dealer.id);
          if(options.type == 'city') {
            citydetails[j.dealer.city] = j;
          } else {
            dealerdetails[j.dealer.id] = j;
          }
        }
      });
    }
  }

  function serviceForm(id) {
    if(typeof(id) != 'undefined') {
      $(".service select[name='dealer'] option").each(function() {
        $(this).attr('selected', false);
        if($(this).val() == id) {
          $(this).attr('selected', true);
        }
      });
    }
    $(".service_form").click(function() {
      $(".service").slideToggle();
      $(".map").toggle();
    });
    $(".back_to_map").click(function() {
      $(".service").slideUp();
      $(".map").show();
    });
  }

}