DIR : /home/kozerus/public_html/jkwii/js/jsdoit/jsdoit15/index.js

/home/kozerus/public_html/jkwii/js/jsdoit/jsdoit15

// forked from Event's "Web Creator's Contest Q the 2nd【vol.2】エントリー用コード" http://jsdo.it/Event/zojr
  window.requestAnimationFrame = (function() {
    return window.requestAnimationFrame||
      window.webkitRequestAnimationFrame||
      window.mozRequestAnimationFrame||
      window.oRequestAnimationFrame||
      window.msRequestAnimationFrame||
      function(callback, element) {
        window.setTimeout(callback, 1000 / 60);
      };
  })();

  var _gStreet = {};
  _gStreet.growl = {
    headText: "Notification",
    bodyText: "This is the message from my site.",
    htmlTemplate: "<section class='growlArea'><div class='growlBody'><h1>Notification</h1><p>This is message from me.</p></div></section>",
    duration: 4000,
    init: function(hText, bText) {
      this.headText = hText;
      this.bodyText = bText;
    },
    setDuration: function(ms) {
      this.duration = ms;
    },
    show: function() {
      $("#growlAreaWrapper .growlArea:first").remove();
      var j = $(this.htmlTemplate);
      j.find(".growlBody h1").html(this.headText);
      j.find(".growlBody p").html(this.bodyText);
      j.appendTo($("#growlAreaWrapper"));
      var growlItself = j;
      growlItself.css('opacity', 1);
      setTimeout(function() {
        growlItself.css('opacity', 0)
        setTimeout(function() {
          growlItself.remove();
        }, 1000);
      }, this.duration);
    }
  }
  _gStreet.spots = [
    {
      name: "Rue Favart",
      desc: "<ul><li>ガーデンプレイスの近くの3階建のカフェ</li><li>壁面が美大生が描いた絵で埋まってて素敵</li><li>料理はフレンチ。カフェのレベル超えてる</li><li>スイーツも下手なケーキ屋さんよりも◎</li><li>値段は多少高め</li></ul>",
      lat: 35.643827,
      lng: 139.71529
    },
    {
      name: "PILE CAFE",
      desc: "<ul><li>入り口が分かりにくいので注意！</li><li>雰囲気がとてもよいです</li><li>フード、ドリンクどれもおいしい</li></ul>",
      lat: 35.647859,
      lng: 139.70844
    },
    {
      name: "nefu cafe",
      desc: "<ul><li>ビルの9Fで景色がよい</li><li>お店の雰囲気◎</li><li>料理・スイーツも◎</li></ul>",
      lat: 35.649032,
      lng: 139.708631
    },
    {
      name: "tokyo salonard cafe : dub",
      desc: "<ul><li>駅近で◎</li><li>酒いろいろある</li><li>スイーツは食べたことない...</li><li>薄暗で雰囲気◎居心地とてもよい</li></ul>",
      lat: 35.657752,
      lng: 139.698943
    },
    {
      name: "SOMA cafe",
      desc: "<ul><li>料理、酒、スイーツ◎</li><li>渋谷駅から近い</li><li>代官山側なので、静かでよい</li><li>時間帯によっては混み合うかも</li><li>Wi-Fi、電源OK</li></ul>",
      lat: 35.655777,
      lng: 139.702998
    },
    {
      name: "RESPEKT",
      desc: "<ul><li>ギーク御用達のカフェw</li><li>Wi-Fi、電源完備</li><li>長時間いても怒られない</li><li>店員かわいい</li></ul>",
      lat: 35.661119,
      lng: 139.704482
    }
  ];
  _gStreet.RandomLatLng = function() {
    var spot = _gStreet.spots[Math.floor(Math.random() * _gStreet.spots.length)];
    return (new google.maps.LatLng(spot.lat, spot.lng))
  };
  _gStreet.getLatLng = function(index) {
    var spot = _gStreet.spots[index];
    return (new google.maps.LatLng(spot.lat, spot.lng));
  };
  _gStreet.setLatLng = function(index) {
    var p = _gStreet.getLatLng(index);
    _gStreet.map.setCenter(p);
    _gStreet.pin.setPosition(p);
    _gStreet.panorama.setPosition(p);
  };
  _gStreet.showGrowl = function(index) {
    var spot = _gStreet.spots[index];
    _gStreet.growl.init(spot.name, spot.desc);
    _gStreet.growl.show();
  };

  $(function() {
    var index = 0;
    $("#nav-spot li a").each(function() {
      $(this).data('index-number', index);
      $(this).on('click', function() {
        $that = $(this);
        $(".active").removeClass('active');
        $that.parent().addClass('active');
        var html = '<div class="gallery-container drop-down"><div class="map-fake"></\div></\div>';
        $("#gallery").prepend(html);
        setTimeout(function() {
          $(".gallery-container:first").remove();
          _gStreet.showGrowl($that.data('index-number'));
        }, 800);
        _gStreet.setLatLng($that.data('index-number'));
      });
      index++;
    });
    _gStreet.mapCanvas = document.getElementById("map-canvas");
    _gStreet.mapPanoramaCanvas = document.getElementById("map-sv-canvas");
    _gStreet.latLng = _gStreet.getLatLng(0);
    _gStreet.gMapOptions = {
      zoom: 15,
      center: _gStreet.latLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    _gStreet.gPanoramaOptions = {
      position: _gStreet.latLng,
      pov: {
        heading: 0,
        pitch: 10,
        zoom: 0
      }
    };
    _gStreet.map = new google.maps.Map(_gStreet.mapCanvas, _gStreet.gMapOptions);

    _gStreet.pin = new google.maps.Marker({
      position: _gStreet.latLng,
      map: _gStreet.map
    });

    _gStreet.panorama = new google.maps.StreetViewPanorama(_gStreet.mapPanoramaCanvas, _gStreet.gPanoramaOptions);
    _gStreet.rotatePanorama = function() {
      var h = _gStreet.panorama.pov.heading;
      h += 0.1;
      if (h >= 360) h = 0;
      var p = {
        heading: h,
        pitch: _gStreet.panorama.pov.pitch,
        zoom: _gStreet.panorama.pov.zoom
      };
      _gStreet.panorama.setPov(p);
      requestAnimationFrame(_gStreet.rotatePanorama);
    };
    _gStreet.rotatePanorama();
    _gStreet.showGrowl(0);
  });