/*
 * guimap.shell.js
 * Shell module for GUIMAP
 */

/* jslint
 */

/* global $, guimap */

guimap.shell = ( function () {
  // ---------- MODULE SCOPE VARIABLES ----------
  var
    configMap = {
      main_html: String("<div class=\"guimap-shell-header\">\r\n  <h1><a href=\".\/\"><img src=\"img\/logo.png\" \/><\/a><\/h1>\r\n  <div class=\"guimap-shell-toolbar\"><form id=\"form-cat\">\r\n      <ul id=\"top_option1\">\r\n        <li>\r\n        <img src=\"img\/t_gubun.gif\" alt=\"\uad6c\ubd84\" class=\"vam\" \/> \r\n        <span class=\"pdR6\"><\/span> \r\n        <select name=\"qt\" class=\"f_select\" style=\"width:100px;\">\r\n          <option value=\"11\">\uc885\uc774\ud574\ub3c4<\/option>\r\n         <!-- <option value=\"14\">\uc218\uce58\ud574\ub3c4<\/option> -->\r\n          <option value=\"12\">\uc11c\uc9c0<\/option>\r\n        <\/select> \r\n        <select name=\"qm_\" class=\"f_select\" style=\"width:100px;display:none;\">\r\n        <\/select> \r\n        <select name=\"qs_\" class=\"f_select\" style=\"width:100px;display:none;\">\r\n          <option value=\"1\">2,000,001 ~ (Overview)<\/option>\r\n          <option value=\"2\">250,001 ~ 2,000,000 (General)<\/option>\r\n          <option value=\"3\">75,001 ~ 250,000 (Coastal)<\/option>\r\n          <option value=\"4\">30,001 ~ 75,000 (Approach)<\/option>\r\n          <option value=\"5\">5,001 ~ 30,000 (Harbour)<\/option>\r\n          <option value=\"6\">0 ~ 5,000 (Berthing)<\/option>\r\n        <\/select>\r\n        <span id=\"lbltip14\" class=\"vam\" style=\"display:inline-block;padding-left:10px;line-height:15px;height:30px;\">\uc804\uc790\ud574\ub3c4\ub294 GUIMAP\uc5d0\uc11c \uad6c\ub9e4\ud558\uc2e4 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.<br>\uad6c\ub9e4\ub97c \uc6d0\ud558\uc2dc\uba74 <b>051-996-9500<\/b>\uc73c\ub85c \uc804\ud654\uc8fc\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<\/span>\r\n        <\/li>\r\n      <\/ul>\r\n      <div id=\"top_option2\">\r\n        <!--<input type=\"checkbox\" name=\"ql\" value=\"1\" \/> \ud574\ub3c4\ubc88\ud638\ubcf4\uae30-->\r\n        <input name=\"ql\" type=\"hidden\" value=\"1\">\r\n        <a href=\"#\" class=\"btn btn-sm btn-default btndrawroute\">\ud56d\ub85c\uac80\uc0c9<\/a>&nbsp;\r\n        <a href=\"#\" class=\"btn btn-sm btn-default btntogglecart\">\uc7a5\ubc14\uad6c\ub2c8<\/a>&nbsp;\r\n\t\t<a href=\"http:\/\/www.chartkorea.com\/manual\/index2.html\" onClick=\"NewWindow(this.href,'eduesti','870','750','yes');return false\" class=\"btn btn-sm btn-default\">\uc774\uc6a9\uc548\ub0b4<\/a>\r\n      <\/div>\r\n  <\/form><\/div>\r\n<\/div>\r\n<div class=\"guimap-shell-search\">\r\n  <div id=\"search_wrap\">\r\n\r\n    <div class=\"pdT10\"><\/div>\r\n\r\n\r\n\r\n    <div id=\"maker\">\r\n      <h3>\ubc1c\ud589\ucc98<\/h3>\r\n      <div class=\"pdT8\"><\/div>\r\n      <div class=\"maker_box boxRound3\">\r\n        <ul>\r\n          <li><input type=\"checkbox\" name=\"qm\" \/> \ud55c\uad6d<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"pdT8\"><\/div>\r\n\r\n    <div id=\"scale\">\r\n      <h3>\ucd95\ucc99<\/h3>\r\n      <div class=\"pdT8\"><\/div>\r\n      <div class=\"scale_box boxRound3\">\r\n        <ul>\r\n          <li><input type=\"checkbox\" name=\"qs\" value=\"1\"> 2,000,001 ~ (Overview)<\/li>\r\n          <li><input type=\"checkbox\" name=\"qs\" value=\"2\"> 250,001 ~ 2,000,000 (General)<\/li>\r\n          <li><input type=\"checkbox\" name=\"qs\" value=\"3\"> 75,001 ~ 250,000 (Coastal)<\/li>\r\n          <li><input type=\"checkbox\" name=\"qs\" value=\"4\"> 30,001 ~ 75,000 (Approach)<\/li>\r\n          <li><input type=\"checkbox\" name=\"qs\" value=\"5\"> 5,001 ~ 30,000 (Harbour)<\/li>\r\n          <li><input type=\"checkbox\" name=\"qs\" value=\"6\"> 0 ~ 5,000 (Berthing)<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n      <div class=\"pdT8\"><\/div>\r\n      <div class=\"tac\">\r\n        <a href=\"#\" id=\"btnloadpr\"><img src=\"img\/btn_load.gif\" \/><\/a> \r\n        <a href=\"#\"id=\"btnclearpr\"><img src=\"img\/btn_clear.gif\" \/><\/a> \r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"line_div\"><img src=\"img\/line_division2.gif\" \/><\/div>\r\n\r\n\r\n    <div id=\"search\">\r\n      <select name=\"searchty\" class=\"f_select\" style=\"width:100%;\">\r\n        <option value=\"1\">CHART NO<\/option>\r\n        <option value=\"2\">NAME<\/option>\r\n      <\/select>\r\n      <div class=\"pdT4 tar\" style=\"position:relative;width:100%;height:30px;\">\r\n        <div style=\"position:absolute;left:0;right:50px;height:27px;background:pink;\">\r\n          <input type=\"text\" name=\"q\" class=\"f_input\" style=\"width:100%;height:100%;\" \/>\r\n        <\/div>\r\n        <a href=\"#\" id=\"btnsearch\"><img src=\"img\/btn_search.gif\" class=\"vam\" \/><\/a>\r\n      <\/div>\r\n      <div class=\"list_box search_result\">\r\n        <ul>\r\n          <li><a href=\"#\"><\/a><\/li>\r\n        <\/ul>\r\n      <\/div>\r\n        <!--div style=\"position:absolute;left:0;right:50px;height:27px;background:pink;\">\r\n          <input type=\"text\" name=\"qp\" class=\"f_input\" style=\"width:100%;height:100%;\" \/>\r\n        <\/div-->\r\n\t\t<br \/>\r\n\t\t<br \/>\r\n\t\t<br \/>\r\n\t\t<br \/>\r\n\t\t<br \/>\r\n\t\t<br \/>\r\n\t\t<br \/>\r\n\t\t<br \/>\r\n\t\t<br \/>\r\n\t\t<br \/>\r\n\t\t<br \/>\r\n\t\t<br \/>\r\n\t\t<br \/>\r\n\t\t<br \/>\r\n\t\t<br \/>\r\n\r\n\t\t<div style=\"padding:1px 2px;\"> \u203b GUI MAP\uc5d0 \uc0ac\uc6a9\ub418\ub294 \ub9f5\uc740 \"OpenStreetMap\"\uc73c\ub85c\uc368 \uad6c\ub9e4\ud558\uc2dc\ub294 \ud574\ub3c4\uc758 \ub300\ub7b5\uc801\uc778 \uad6c\uc5ed\ud655\uc778 \uc6a9\ub3c4\ub85c\ub9cc \uc81c\ud55c\ud558\uc5ec \uc0ac\uc6a9\ud558\uc2dc\uae30 \ubc14\ub78d\ub2c8\ub2e4.<br \/> \r\n(\ud56d\ud574\uc6a9, \ud589\uc815\uacbd\uacc4\uc6a9, \uae30\ud0c0 \ub9f5\uc0c1 \ubd80\uac00\uc815\ubcf4 \uc0ac\uc6a9\ubaa9\uc801\uc758 \uae08\uc9c0)<\/div> \r\n\t\t\r\n    <\/div>\r\n\r\n  <div class=\"guimap-shell-progress\" style=\"position:absolute;width:100%;left:0;bottom:0;padding:5px;display:none;\">\r\n    <div class=\"progress\" style=\"margin-bottom:0;background-color:#e5e5e5;\">\r\n      <div class=\"progress-bar progress-bar-striped active\" role=\"progressbar\" aria-valuenow=\"10\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 10%;\">\r\n        <span class=\"sr-only\">i0%<\/span>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n<div class=\"guimap-shell-map\"><\/div>\r\n<div class=\"guimap-shell-info\"><\/div>\r\n<div class=\"guimap-shell-footer\"><\/div>\r\n\r\n<div class=\"guimap-shell-cart\">\r\n  <div class=\"panel panel-primary\">\r\n    <div class=\"panel-heading\" style=\"padding:4px 15px;\"><span class=\"glyphicon glyphicon-shopping-cart\" aria-hidden=\"true\"><\/span> \uc7a5\ubc14\uad6c\ub2c8<\/div>\r\n    <div class=\"panel-body\" style=\"padding:10px;\">\r\n\r\n\r\n\r\n      <div class=\"list_box\">\r\n        <ul class=\"cartlist\">\r\n          <li><a href=\"#\"><\/a> <a href=\"#\"><span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\"><\/span><\/a><\/li>\r\n        <\/ul>\r\n      <\/div>\r\n      <div class=\"tac pdT5\">\r\n        <a href=\"#\" class=\"btn btn-primary btn-xs btnorder\" style=\"padding-left:10px;padding-right:10px;color:#fff;\">\uc8fc \ubb38<\/a>\r\n        <a href=\"#\" class=\"btn btn-default btn-xs btnemptycart\" style=\"padding-left:10px;padding-right:10px;\">\ube44\uc6b0\uae30<\/a>\r\n      <\/div>\r\n\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n") ,
      prcat: {
        '11': { '11': 'KOREA ', '12': 'BA ', '13': 'JAPAN ', '15': 'AUS'/*, '14': '미국', '16': '뉴질랜드'*/ },
        '14': { '11': 'KOREA '/*, '12': 'BA ', '13': 'JAPAN ', '14': '싱가폴', '15': '국제전자해도센터'*/ },
        '12': { '11': 'KOREA ', '12': 'BA '/*, '13': 'JAPAN ', '14': '미국', '15': '국제해사기구서지', '16': 'ICS/OCIMF/SIGTTO', '17': '미국해안경비국서지', '18': '국제전기통신연합서지', '19': '각종해사관련서지', '20': '한국판 항해용 참고도서'*/ }
      }
    },
    stateMap = {
      $container: null,
      qt: '11',
      qm: null,
      qs: '1,2,3,4,5,6',
      q: '',
      qp: ''
    },
    jqueryMap = {},
    copyAnchorMap, changeAnchorPart, makeSelectOptions, makeCheckboxList, loadPr,
    setJqueryMap, setFormCatData, searchPrByCode, searchLocation, searchRoute, cartRoute, loadCart, toggleCart, showCart, updateCart, removeFromCart, emptyCart,
    onHashChange, onChangeFormCatQt, onClickFormCatQm, onClickFormCatQs, 
    onClickBtnLoadPr, onClickBtnClearPr, onChangeFormLabelVisible,
    onClickBtnSearch, onClickBtnToggleCart, onClickBtnDrawRoute, onClickBtnCartView, onClickBtnRemoveFromCart, onClickBtnOrder, onClickBtnEmptyCart,
    initModule, showProgress, hideProgress;

  // ---------- UTILITY METHODS ----------
  copyAnchorMap = function () {
    return $.extend( true, {}, stateMap.anchor_map );
  };

  changeAnchorPart = function ( arg_map ) {
    var
      anchor_map_revise = copyAnchorMap(),
      bool_return       = true,
      key_name, key_name_dep;

    // Begin merge changes into anchor map
    KEYVAL:
    for ( key_name in arg_map ) {
      if ( arg_map.hasOwnProperty( key_name ) ) {

        // skip dependent keys during iteration
        if ( key_name.indexOf( '_' ) === 0 ) { continue KEYVAL; }

        // update independent key value
        anchor_map_revise[key_name] = arg_map[key_name];

        // update matching dependent key
        key_name_dep = '_' + key_name;
        if ( arg_map[key_name_dep] ) {
          anchor_map_revise[key_name_dep] = arg_map[key_name_dep];
        }
        else {
          delete anchor_map_revise[key_name_dep];
          delete anchor_map_revise['_s' + key_name_dep];
        }
      }
    }
    // End merge changes into anchor map

    // Begin attempt to update URI; revert if not successful
    try {
      $.uriAnchor.setAnchor( anchor_map_revise );
    }
    catch ( error ) {
      // replace URI with existing state
      $.uriAnchor.setAnchor( stateMap.anchor_map,null,true );
      bool_return = false;
    }
    // End attempt to update URI...

    return bool_return;
  };

  makeSelectOptions = function (select, data, value) {
    select.options.length = 0;
    for (var name in data) {
      select.options[select.options.length] = new Option(data[name], name);
    }
    if (value) {
      select.value = value;
    } else {
      select.options[0].selected = true;
    }
  };

  makeCheckboxList = function (checkboxwrap, name, data, value) {
    //var checkboxwrap = checkbox.parent();
    checkboxwrap.find('ul').empty();
    for (var key in data) {
      checkboxwrap.find('ul').append('<li class="maker'+key+'"><input type="checkbox" name="'+name+'" value="'+key+'">'+data[key]+'</li>\n');
    }
    if (value) {
      checkboxwrap.find('[name="'+name+'"]').setValue([value]);
    }
  };

  loadPr = function () {
    if (guimap.pr.getStatus()) {
      jqueryMap.$searchResult.find('ul').empty();
      guimap.pr.loadCategory({ prty: stateMap.qt, maker: stateMap.qm, scale: stateMap.qs });
    }
  };

  clearPr = function () {
    if (guimap.pr.getStatus()) {
      jqueryMap.$searchResult.find('ul').empty();
      guimap.pr.loadCategory({ prty: '', maker: '', scale: '' });
    }
  };

  searchPr = function (q, cb) {
    if (guimap.pr.getStatus()) {
      var searchlist = guimap.pr.searchPrByCode({ prty: stateMap.qt, maker: stateMap.qm, scale: stateMap.qs, q: q });
      var ul = jqueryMap.$searchResult.find('ul');
      ul.empty();
      for (var i=0;i<searchlist.length;i++) {
        ul.append('<li><a href="#" class="btnsearchview" data-pmcode="'+searchlist[i].pmcode+'">'+searchlist[i].pmcode+' ' +searchlist[i].pmname+'</a></li>');
      }
      jqueryMap.$searchResult.show();
      ul.scrollTop(0);

      if (typeof cb === 'function') {
        cb();
      }
    }
  };
  // ---------- DOM METHODS ----------
  setJqueryMap = function () {
    var $container = stateMap.$container;

    jqueryMap = {
      $container: $container,
      $formCat: $container.find('#form-cat'),
      $formCatQt: $container.find('#form-cat [name="qt"]'),
      $formCatQmWrap: $container.find('#maker .maker_box'),
      $formCatQm: $container.find('#maker [name="qm"]'),
      $formCatQsWrap: $container.find('#scale .scale_box'),
      $formCatQs: $container.find('#scale [name="qs"]'),
      $formSearch: $container.find('#form-search'),
      $btnLoadPr: $container.find('#btnloadpr'),
      $btnClearPr: $container.find('#btnclearpr'),
      $formSearchTy: $container.find('[name="searchty"]'),
      $formSearchQ: $container.find('[name="q"]'),
      $btnSearch: $container.find('#btnsearch'),
      $searchResult: $container.find('.search_result'),
      $cartlist: $container.find('.cartlist'),
      $map: $container.find('.guimap-shell-map')
    };
  };

  setFormCatData = function() {
    var prty = stateMap.qt;
    var maker = stateMap.qm;
    var scale = stateMap.qs;

    if (prty!='' && prty != jqueryMap.$formCatQt.val()) {
      jqueryMap.$formCatQt.val(prty);
      //makeSelectOptions(jqueryMap.$formCatQm[0], configMap.prcat[prty], maker);
    }
    makeCheckboxList(jqueryMap.$formCatQmWrap, 'qm', configMap.prcat[prty], maker);
    jqueryMap.$formCatQm = jqueryMap.$container.find('#maker [name="qm"]');
    
    if (maker===null) {
      maker = ''; //jqueryMap.$formCatQm.eq(0).val();
      stateMap.qm = maker;
    }
    if (maker != jqueryMap.$formCatQm.getValue()) jqueryMap.$formCatQm.setValue(maker);

    if (scale===null) {
      scale = '1,2,3,4,5,6'; //jqueryMap.$formCatQs[0].options[0].value;
      stateMap.qs = scale;
    }
    if (scale != jqueryMap.$formCatQs.getValue()) jqueryMap.$formCatQs.setValue(scale);

    //if (stateMap.qp != stateMap.$container.find('[name="qp"]').val()) stateMap.$container.find('[name="qp"]').val(stateMap.qp)
    if (prty=='14')
      stateMap.$container.find('#lbltip14').show();
    else
      stateMap.$container.find('#lbltip14').hide();
  };

  searchPrByCode = function (q) {
    searchPr(q);
  }

  searchRoute = function (q) {
    if (guimap.pr.getStatus()) {
      guimap.pr.loadRoute({ prty: stateMap.qt, maker: stateMap.qm, scale: stateMap.qs, route: q });
    }
  }

  cartRoute = function (q) {
    if (guimap.pr.getStatus()) {
      guimap.pr.addToCartRouteMap();
    }
  }

  searchLocation = function (q) {
    if (guimap.pr.getStatus()) {
      var searchlist = [];
      var ul = jqueryMap.$searchResult.find('ul');
      ul.empty();

      $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?region=KR&address='+encodeURIComponent(q)+'&sensor=false', function(response){
        if (response.status=='OK') {
          for (var i=0;i<response.results.length;i++) {
            searchlist.push({name: response.results[i].formatted_address, location: response.results[i].geometry.location, viewport: response.results[i].geometry.viewport});
          }
        }

        for (var i=0;i<searchlist.length;i++) {
          ul.append('<li><a href="#" class="btnsearchlocationview" data-lat="'+searchlist[i].location.lat+'" data-lng="'+searchlist[i].location.lng+'" data-nelat="'+searchlist[i].viewport.northeast.lat+'" data-nelng="'+searchlist[i].viewport.northeast.lng+'" data-swlat="'+searchlist[i].viewport.southwest.lat+'" data-swlng="'+searchlist[i].viewport.southwest.lng+'">'+searchlist[i].name+'</a></li>');
        }
        jqueryMap.$searchResult.show();
      });

    }
  };

  loadCart = function ()
  {
    var cartlist = [];
    var ul = jqueryMap.$cartlist;
    ul.empty();

    $.getJSON('data.php?act=cart', function(response){
      if (response.status=='1') {
        for (var i=0;i<response.data.length;i++) {
          cartlist.push({no: response.data[i].no, prcd: response.data[i].prcd, prname: response.data[i].prname, qty: response.data[i].qty, price: response.data[i].price});
        }

        for (var i=0;i<cartlist.length;i++) {
          ul.append('<li><a href="#" class="btncartview" data-no="'+cartlist[i].no+'" data-prcd="'+cartlist[i].prcd+'" data-prname="'+cartlist[i].prname+'" data-qty="'+cartlist[i].qty+'" data-price="'+cartlist[i].price+'">'+cartlist[i].prcd+' '+cartlist[i].prname+'</a> <a href="#" class="btnremovefromcart" data-no="'+cartlist[i].no+'" data-prcd="'+cartlist[i].prcd+'" style=""><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></li>');
        }
        //jqueryMap.$cartlist.show();
      }
    });

  }

  toggleCart = function () {
    var div = stateMap.$container.find('.guimap-shell-cart');
    var btn = $('.btntogglecart');
    var isactive = btn.hasClass('active');
    if (isactive) {
      div.hide();
      btn.removeClass('active');
    } else { 
      div.slideDown('fast');
      btn.addClass('active');
    }
  }

  showCart = function () {
    var div = stateMap.$container.find('.guimap-shell-cart');
    var btn = $('.btntogglecart');
    div.slideDown('fast');
    btn.addClass('active');
  }

  updateCart = function () {
    loadCart();
    showCart();
  }

  removeFromCart = function (no, prcd) {
    $.getJSON('/include/lib.php?act=ord_removefromcart&restype=json&no='+no, function(response){
      if (response.status=='1') {
        loadCart();
        guimap.pr.removeFromCart(prcd);
      } else {
        alert('처리중 오류가 발생하였습니다');
      }
    });
  }

  emptyCart = function () {
    $.getJSON('/include/lib.php?act=ord_emptycart&restype=json', function(response){
      if (response.status=='1') {
        loadCart();
        guimap.pr.emptyCart();
        toggleCart();
      } else {
        alert('처리중 오류가 발생하였습니다');
      }
    });
  }

  // ---------- EVENT HANDLERS ----------
  onHashChange = function ( event ) {
    var
      anchor_map_previous = copyAnchorMap(),
      anchor_map_proposed;

    // attempt to parse anchor
    try { anchor_map_proposed = $.uriAnchor.makeAnchorMap(); }
    catch ( error ) {
      $.uriAnchor.setAnchor( anchor_map_previous, null, true );
      return false;
    }
    stateMap.anchor_map = anchor_map_proposed;

    // Begin adjust chat component if changed
    if ( ! anchor_map_previous
     || anchor_map_previous._s_qt !== anchor_map_proposed._s_qt
     || anchor_map_previous._s_qm !== anchor_map_proposed._s_qm
     || anchor_map_previous._s_qs !== anchor_map_proposed._s_qs
     || anchor_map_previous._s_qp !== anchor_map_proposed._s_qp
    ) {
      stateMap.qt = anchor_map_proposed.qt;
      stateMap.qm = anchor_map_proposed.qm;
      stateMap.qs = anchor_map_proposed.qs;
      stateMap.qp = anchor_map_proposed.qp;

      setFormCatData();
      if (anchor_map_previous._s_qp !== anchor_map_proposed._s_qp) {
        searchPr(stateMap.qp, function(){
          $('.btnsearchview').eq(0).click();
        });
      }
    }
    // End adjust chat component if changed

    return false;
  };
  onChangeFormCatQt = function (e) {
    var prty = $(this).val();
    changeAnchorPart({
      qt : ( prty ? prty : '11' ),
      qm : '',
      qs : stateMap.qs
    });
    return false;
  };
  onClickFormCatQm = function (e) {
    var maker = stateMap.$container.find('#maker [name="qm"]').getValue();
    changeAnchorPart({
      qt : stateMap.qt,
      qm : ( maker ? maker : '' ),
      qs : stateMap.qs
    });
    return true;
  };
  onClickFormCatQs = function (e) {
    var scale = jqueryMap.$formCatQs.getValue();
    changeAnchorPart({
      qt : stateMap.qt,
      qm : stateMap.qm,
      qs : ( scale ? scale : '' )
    });
    return false;
  };
  onClickBtnLoadPr = function (e) {
    e.preventDefault();
    $(this).blur();
    loadPr();
  };
  onClickBtnClearPr = function (e) {
    e.preventDefault();
    clearPr();
  };
  onClickBtnSearch = function (e) {
    e.preventDefault();
    var searchty = jqueryMap.$formSearchTy.val();
    var q = jqueryMap.$formSearchQ.val();
    
    if (searchty=='1') searchPrByCode(q);
    else if (searchty=='2') searchLocation(q);
  };
  onKeypressSearchQ = function (e) {
    if (e.which==13) {
      e.preventDefault();
      jqueryMap.$btnSearch.click();
    }
  };
  onClickBtnSearchView = function (e) {
    e.preventDefault();
    var pmcode = $(this).data('pmcode');
    guimap.pr.viewPr(pmcode);
  };
  onClickBtnSearchLocationView = function (e) {
    e.preventDefault();
    var lat = $(this).data('lat');
    var lng = $(this).data('lng');
    var ne = new google.maps.LatLng($(this).data('nelat'), $(this).data('nelng'));
    var sw = new google.maps.LatLng($(this).data('swlat'), $(this).data('swlng'));
    //guimap.map.setCenter(lat, lng);
    guimap.map.setViewport(ne, sw);
  };
  onClickBtnCartView = function (e) {
    e.preventDefault();
    var pmcode = $(this).data('prcd');
    guimap.pr.viewPr(pmcode);
  };
  onClickBtnToggleCart = function (e) {
    e.preventDefault();
    toggleCart();
    $(this).blur();
  };
  onClickBtnDrawRoute = function (e) {
    e.preventDefault();
    var isactive = $(this).hasClass('active');
    if (isactive) {
      guimap.route.endRoute();
      $(this).removeClass('active');
    } else { 
      clearPr();
      guimap.route.startRoute();
      $(this).addClass('active');
    }
    $(this).blur();
  };
  onClickBtnRemoveFromCart = function (e) {
    e.preventDefault();
    var no = $(this).data('no');
    var prcd = $(this).data('prcd');
    removeFromCart(no, prcd);
  }
  onClickBtnOrder = function (e) {
    e.preventDefault();
    location.href = '/cart.html';
  }
  onClickBtnEmptyCart = function (e) {
    e.preventDefault();
    emptyCart();
  }
  // ---------- PUBLIC METHODS ----------

  initModule = function ( $container ) {
    stateMap.$container = $container;
    $container.html( configMap.main_html );
    setJqueryMap();

    jqueryMap.$formCatQt.on('change', onChangeFormCatQt);
    //jqueryMap.$formCatQm.on('click', onClickFormCatQm);
    $(document).on('click', '#maker [name="qm"]', onClickFormCatQm);
    jqueryMap.$formCatQs.on('click', onClickFormCatQs);
    jqueryMap.$btnLoadPr.on('click', onClickBtnLoadPr);
    jqueryMap.$btnClearPr.on('click', onClickBtnClearPr);
    jqueryMap.$btnSearch.on('click', onClickBtnSearch);
    jqueryMap.$formSearchQ.on('keypress', onKeypressSearchQ);
    $(document).on('click', '.btnsearchview', onClickBtnSearchView);
    $(document).on('click', '.btnsearchlocationview', onClickBtnSearchLocationView);
    $(document).on('click', '.btncartview', onClickBtnCartView);
    $(document).on('click', '.btnremovefromcart', onClickBtnRemoveFromCart);
    $(document).on('click', '.btntogglecart', onClickBtnToggleCart);
    $(document).on('click', '.btndrawroute', onClickBtnDrawRoute);
    $(document).on('click', '.btnorder', onClickBtnOrder);
    $(document).on('click', '.btnemptycart', onClickBtnEmptyCart);

    $(window)
      .on( 'hashchange', onHashChange ).trigger( 'hashchange' );

    setFormCatData();

    guimap.pr.initModule({ prty: stateMap.qt, maker: stateMap.qm, scale: stateMap.qs, cartcallback: updateCart });
    //guimap.map.initModule(jqueryMap.$map, {} );
    guimap.map.initModule(jqueryMap.$map, {'onIdle': guimap.pr.drawPrMap} );
    loadCart();
    guimap.route.initModule({ 'clearcallback': clearPr, 'searchcallback': searchRoute, 'cartcallback': cartRoute });
    
    if (stateMap.qp!=undefined && stateMap.qp!=='') {
      searchPr(stateMap.qp, function(){
        $('.btnsearchview').eq(0).click();
      });
    }
  };

  showProgress = function (percent) {
    $('.guimap-shell-progress .progress-bar').css('width', percent+'%').show();
    $('.guimap-shell-progress').show();
  }

  hideProgress = function () {
    $('.guimap-shell-progress').hide();
  }

  return { 
    initModule: initModule,
    showProgress: showProgress,
    hideProgress: hideProgress
  };
} ());