$(function () {
  var R = Raphael("paper", 600, 500);
  var RS = Raphael("svgpaper", 600, 500);
  var attr = {
    fill: "#bba064",
    fill: "#999999",
    stroke: "#fff",
    "stroke-width": 2,
    "stroke-linejoin": "round",
    "opacity": "1"
  };
  var attr2 = {
    fill: "#000000",
    stroke: "#ffffff",
    "stroke-width": 2,
    "stroke-linejoin": "round",
    "opacity": "0"
  };
  var len = patharray.length
  var arry = new Array()
  for (var st in patharray) {
    arry[st] = RS.path(patharray[st]).attr(attr)
  }

  var aus = new Array()
  for (var st in patharray) {
    aus[st] = R.path(patharray[st]).attr(attr2)
  }


  for (var state in aus) {

    (function (st, state) {
      var varst = st[0]
      $(varst).mouseover(function () {

        $(this).css({
          "cursor": "pointer"
        })
        arry[state].animate({
          fill: "#dd2d2d",
          stroke: "#ffffff",
          opacity: 1
        }, 100);
      });

      $(varst).mouseout(function () {
        if ($(varst).attr("id") == "clickPosition") {
          return false;
        } else {
          arry[state].animate({
            fill: mapBgColor[state].fill,
            stroke: "#ffffff",
            opacity: 1
          }, 100);
        }
      });

      $(varst).click(function (e) {

        var x = $(".map_box").offset().left;
        var y = $(".map_box").offset().top;
        var tt = Number(state) + 1;
        $(".mCSB_container").html("");
        for (var i = 0; i < $(".province_ul li").eq(state).find("dl").length; i++) {
          $(".mCSB_container").append("<li class='liBox" + i + "'></li>");
          $(".province_ul li").eq(state).find("dl").eq(i).clone().appendTo($(".liBox" + i));
        }

        //$(".marketing_b_co ul").html($(".province_ul li").eq(state).find(".hidden").html())
        $(varst).attr("id", "clickPosition").siblings().attr("id", "");
        for (var i = 0; i < aus.length; i++) {
          arry[i].animate({
            fill: mapBgColor[i].fill,
            stroke: "#ffffff",
            opacity: 1
          }, 100);
        }
        arry[state].animate({
          fill: "#dd2d2d",
          stroke: "#ffffff",
          opacity: 1
        }, 100);

      });

      if (state == 5) {
        mapActive($(varst), state)
      }


    })(aus[state], state);
  }
  $(".clickMap li").click(function () {
    $(".clickMap").removeClass("active")
    var nub = $(this).index()
    $(".selectInputTxt").text($(this).text())
    for (var state in aus) {
      (function (st, state) {
        var varst = st[0]
        if (state == nub) {
          mapActive($(varst), state)
        }
      })(aus[state], state);
    }
  })

  $(".selectInput").click(function () {
    if ($(".clickMap").hasClass("active")) {
      $(".clickMap").removeClass("active")
    } else {
      $(".clickMap").addClass("active")
    }
  })

  function mapActive(dom, state) {
    setTimeout(function () {
      var x = $(".map_box").offset().left;
      var y = $(".map_box").offset().top;
      var tt = Number(state) + 1;
      $(".mCSB_container").html("");
      for (var i = 0; i < $(".province_ul li").eq(state).find("dl").length; i++) {
        $(".mCSB_container").append("<li class='liBox" + i + "'></li>");
        $(".province_ul li").eq(state).find("dl").eq(i).clone().appendTo($(".liBox" + i));
      }

      //$(".marketing_b_co ul").html($(".province_ul li").eq(state).find(".hidden").html())
      dom.attr("id", "clickPosition").siblings().attr("id", "");
      for (var i = 0; i < aus.length; i++) {
        // arry[i].animate({fill: "#bba064", stroke: "#ffffff", opacity: 1}, 100);
        arry[i].animate({
          fill: mapBgColor[i].fill,
          stroke: "#ffffff",
          opacity: 1
        }, 100);
      }
      arry[state].animate({
        fill: "#dd2d2d",
        stroke: "#ffffff",
        opacity: 1
      }, 100);
    }, 500)
  }




});