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

/home/kozerus/public_html/jkwii/js/jsdoit/forked_media_rss_view

// forked from Event's "Simple MediaRSS Viewer" http://jsdo.it/Event/simple-mediarss-viewer

/**
 * 画像をクリックすると中心へ移動
 * 中心の画像をもう一度クリックすると拡大表示
 * フォームより検索も可
 */

google.load("feeds", "1");
google.setOnLoadCallback(initialize);

var _sw, _sh;
function initialize() {
  _sw = window.innerWidth;
  _sh = window.innerHeight;
  if(!_sw || !_sh) {
    _sw = document.documentElement.clientWidth;
    _sh = document.documentElement.clientHeight;
  }
  search( $("#tags").val() );
}

function search(tags) {
  // 空にしてから更新
  $("#media_rss").empty();
  
  var feed = new google.feeds.Feed("http://api.flickr.com/services/feeds/photos_public.gne?tags=" + encodeURI(tags) + "&format=rss_200");
  var MediaRSS = "http://search.yahoo.com/mrss/";
  
  var thumbs = [];
  feed.setNumEntries(30);
  feed.setResultFormat(google.feeds.Feed.MIXED_FORMAT);
  feed.load(function(result) {
    if (!result.error) {
      var entries = result.feed.entries;
      for (var i = 0; i < entries.length; i++) {
        var thumbNodes = google.feeds.getElementsByTagNameNS(entries[i].xmlNode, MediaRSS, "thumbnail");
        var contentNodes = google.feeds.getElementsByTagNameNS(entries[i].xmlNode, MediaRSS, "content");
        var titleNodes = google.feeds.getElementsByTagNameNS(entries[i].xmlNode, MediaRSS, "title");
        var creditNodes = google.feeds.getElementsByTagNameNS(entries[i].xmlNode, MediaRSS, "credit");
        var descNodes = google.feeds.getElementsByTagNameNS(entries[i].xmlNode, MediaRSS, "description");
        if (thumbNodes.length === 0)
          continue;
        
        var thumbURL = thumbNodes[0].getAttribute("url");
        var thumbWidth = thumbNodes[0].getAttribute("width");
        var thumbHeight = thumbNodes[0].getAttribute("height");
        var contentURL = contentNodes[0].getAttribute("url");
        
        // 空だと落ちる
        var Title = titleNodes[0].firstChild;
        if(Title != null) {
          Title = titleNodes[0].firstChild.nodeValue;
        } else {
          Title = "No Title";
        }
        var Credit = creditNodes[0].firstChild;
        if(Credit != null) {
          Credit = creditNodes[0].firstChild.nodeValue;
        } else {
          Credit = "No Credit";
        }
        
        if (thumbURL && contentURL) {
          thumbs.push({
            thumb: thumbURL,
            thumbWidth: parseInt(thumbWidth),
            thumbHeight: parseInt(thumbHeight),
            url: contentURL,
            title: Title,
            credit: Credit
          });
        }
      }
      onImageLoaded(thumbs);
    }
  });

  return false;
}

var _degs;
function onImageLoaded(images) {
  _degs = new Array(images.length);
  $.each(images, function(index, image) {
    _degs[index] = Math.random() * 360;
    var rad = _degs[index] * Math.PI / 180;
    var img = $("<img />")
      .css({
        "position": "absolute",
        "left": Math.floor( Math.random() * (450 - image.thumbWidth - 5) + ( (_sw - 450) / 2 ) ) + "px",
        "top": Math.floor( Math.random() * (450 - image.thumbHeight - 5) + ( (_sh - 450) / 2 ) ) + "px",
        "background-color": "#FFF",
        "padding": "3px 3px 15px",
        "border": 0,
        "z-index": index,
        "box-shadow": "2px 2px 2px #333",
        "-moz-box-shadow": "2px 2px 2px #333",
        "-webkit-box-shadow": "2px 2px 2px #333",
        "-o-transform": "rotate(" + _degs[index] + "deg)",
        "-moz-transform": "rotate(" + _degs[index] + "deg)",
        "-webkit-transform": "rotate(" + _degs[index] + "deg)",
        "filter": "progid:DXImageTransform.Microsoft.Matrix(M11 = " + Math.cos(rad) + ", M12 = " + Math.sin(rad) + ", M21 = " + (-Math.sin(rad)) + ", M22 = " + Math.cos(rad) + ", Dx = 1.0, Dy = 1.0, FilterType = 'bilinear', SizingMethod = 'auto expand')"
      })
      .attr({
        "src": image.thumb,
        "alt": image.title,
        "id": "id" + index
      })
      .bind("click", function() {
        onImageClick(images, index);
      });
    var a = $("<a />")
      .attr({
        "href": "javascript: void(0);",
        "id": "link" + index,
        "title": "title: " + image.title + " | credit: " + image.credit
      })
      .append(img);
    $("#media_rss").append(a);
  });
}

var _timer;
var _center = null;
function onImageClick(images, index) {
  if(_timer) { clearInterval(_timer); }
  
  var bef = {x: -1, y: -1};
  var cp = {
    x: _sw / 2 - ((images[index].thumbWidth + parseInt( $("#id" + index).css("padding-left") ) + parseInt( $("#id" + index).css("padding-right") )) / 2),
    y: _sh / 2 - ((images[index].thumbHeight + parseInt( $("#id" + index).css("padding-top") ) + parseInt( $("#id" + index).css("padding-bottom") )) / 2),
    deg: 360
  };
  if(cp.deg - _degs[index] > 180) { cp.deg = 0; }
  
  _timer = setInterval(function() {
    // クリックした画像をセンターに持ってくる
    var clImg = {
      x: parseInt( $("#id" + index).css("left") ),
      y: parseInt( $("#id" + index).css("top") )
    };
    clImg.x += (cp.x - clImg.x) / 7;
    clImg.y += (cp.y - clImg.y) / 7;
    _degs[index] += (cp.deg - _degs[index]) / 7;
    var rad = _degs[index] * Math.PI / 180;
    
    $("#id" + index).css({
      "left": clImg.x + "px",
      "top": clImg.y + "px",
      "-o-transform": "rotate(" + _degs[index] + "deg)",
      "-moz-transform": "rotate(" + _degs[index] + "deg)",
      "-webkit-transform": "rotate(" + _degs[index] + "deg)",
      "filter": "progid:DXImageTransform.Microsoft.Matrix(M11 = " + Math.cos(rad) + ", M12 = " + Math.sin(rad) + ", M21 = " + (-Math.sin(rad)) + ", M22 = " + Math.cos(rad) + ", Dx = 1.0, Dy = 1.0, FilterType = 'bilinear', sizingMethod = 'auto expand')"
    });
    if(clImg.x == bef.x && clImg.y == bef.y) {
      // センターに来たらストップ
      clearInterval(_timer);
      // 前センター画像のlightbox解除
      if(_center) { regEvent(images, _center); }
      // センター画像クリックはlightBox表示
      $("#link" + index)
        .unbind("click")
        .attr("href", images[index].url)
        .lightBox();
      // z-index振り直し
      var clzidx = parseInt( $("#id" + index).css("z-index") );
      for(var i = 0; i < images.length; i++) {
        if(i == index) {
          // クリックした画像を上に
          $("#id" + i).css("z-index", images.length - 1);
        } else if(parseInt( $("#id" + i).css("z-index") ) > clzidx) {
          // クリックした画像より上だった物を下に
          $("#id" + i).css("z-index", parseInt( $("#id" + i).css("z-index") ) - 1);
        }
      }
      // 現センター画像ID更新
      _center = index;
    } else {
      bef.x = clImg.x;
      bef.y = clImg.y;
    }
    
    // センター付近の画像を外へ移動
    for(var i = 0; i < images.length; i++) {
      if(i == index) { continue; }
      
      var etc = {
        x: parseInt( $("#id" + i).css("left") ),
        y: parseInt( $("#id" + i).css("top") )
      };
      if(Math.pow(etc.x - cp.x, 2) + Math.pow(etc.y - cp.y, 2) < Math.pow(150, 2)) {
        etc.x -= (clImg.x - etc.x) / 7;
        etc.y -= (clImg.y - etc.y) / 7;
        $("#id" + i).css({
          "left": etc.x + "px",
          "top": etc.y + "px"
        });
      }
    }
  }, 1000 / 30);
}

function regEvent(images, i) {
  $("#link" + i)
    .unbind("click")
    .attr("href", "javascript: void(0);")
    .bind("click", function() {
      onImageClick(images, i);
    });
}