var KENTBREW = window.KENTBREW || {};

KENTBREW.flickrball = function() {
   var $ = {};
//   $.sortBy = ['date-posted-asc', 'date-posted-desc', 'date-taken-asc', 'date-taken-desc', 'interestingness-desc', 'interestingness-asc', 'relevance'];
   $.sortBy = ['interestingness-desc'];
   $.head = document.getElementsByTagName('head')[0];
   $.photoCount = 49;
   $.perRow = Math.sqrt($.photoCount);
   $.img = [];
   $.anim = [];
   $.rad = 150;
   $.cx = $.cy = -$.rad;
   $.w = 40;
   $.cellSize = 75;
   $.minSize = 14;   
   $.debug = document.getElementById('debug');
   return {
      init : function(theDiv) {
         $.flickrball = document.getElementById(theDiv);
         $.clicks = $.flickrball.getElementsByTagName('SPAN')[0];
         $.alpha = $.flickrball.getElementsByTagName('INPUT')[0];
         $.omega = $.flickrball.getElementsByTagName('INPUT')[1];
         $.restart = $.flickrball.getElementsByTagName('BUTTON')[0];
         $.board = $.flickrball.getElementsByTagName('DIV')[0];
         $.set = $.board.getElementsByTagName('DIV')[0];
	 document.onmousemove = function(e) {
	    if (window.event) { 
	       e = window.event; 
	    }
	    $.cx = ( e.x || e.clientX ) - $.cellSize / 0.75;
	    $.cy = ( e.y || e.clientY ) - $.cellSize / 0.75;
	 };
         $.frame = $.board.getElementsByTagName('DIV')[1];
         $.art = $.frame.getElementsByTagName('DIV')[0];
         $.title = $.frame.getElementsByTagName('H3')[0];
         $.signature = $.frame.getElementsByTagName('P')[0];
         $.showPage = $.signature.getElementsByTagName('A')[0];
         $.showStream = $.signature.getElementsByTagName('A')[1];
         $.hideFrame = $.signature.getElementsByTagName('A')[2];
         $.hideFrame.onclick = function() {
            KENTBREW.flickrball.hideFrame();
         };
         $.list = $.flickrball.getElementsByTagName('UL')[0];
         $.restart.onclick = function() {
            KENTBREW.flickrball.startNewGame();
         };
         $.tags = $.flickrball.getElementsByTagName('P')[1];
         KENTBREW.flickrball.startNewGame();
      },
      startNewGame : function() {
        $.tagsUsed = [];
        $.list.innerHTML = '';
        $.clickCounter = -1;
        $.tags.innerHTML = '';
        KENTBREW.flickrball.addTag($.alpha.value);
        $.targetTag = $.omega.value;
      },
      run : function() {
        var theKids = $.set.getElementsByTagName('IMG');
	for (var i = 0; i < theKids.length; i++) {
  	   KENTBREW.flickrball.moveItem(theKids[i]);
	}
      },
      addClick : function() {
         $.clickCounter++;      
         $.clicks.innerHTML = 'Clicks: ' + $.clickCounter;
      },
      getSet : function(tag) {
         $.currentTag = tag;

         var theTags = $.list.getElementsByTagName('A');
         for (var i = 0; i < theTags.length; i++) {
            if (theTags[i].innerHTML == tag) {
               var theItem = theTags[i].parentNode;
               theItem.parentNode.removeChild(theItem);
               if ($.list.getElementsByTagName('LI').length) {
                  $.list.insertBefore(theItem, $.list.getElementsByTagName('LI')[0]);
               } else {
                  $.list.appendChild(theItem);
               }
               break;
            }
         }
         
         KENTBREW.flickrball.addClick();
         if (tag == $.targetTag) {
            alert('Winner!  We have a winner!\nNow, see if you can get there in less than ' + $.clickCounter + ' clicks.');
         }
         $.title.innerHTML = 'getting photo set for "' + tag + '" now....';
         $.art.style.display = 'none';
         $.signature.style.display = 'none';
         KENTBREW.flickrball.showFrame();
         if ($.setScript) {
            $.head.removeChild($.setScript);
         }
         $.setScript = document.createElement('script');
         var sortBy = $.sortBy[parseInt(Math.random() * $.sortBy.length, 10)];
         var pageToGet = KENTBREW.flickrball.getPage(tag) + 1;
         var uri='https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=2c06b7bd1c4c5987f3daea25784f0015&sort=' + sortBy + '&page=' + pageToGet + '&format=json&jsoncallback=KENTBREW.flickrball.pingSet&tags=' + escape(tag);
         KENTBREW.flickrball.runScript($.setScript, uri);
      },
      addTag : function(tag) {
         var theItem = document.createElement('LI');
         var a = document.createElement('A');
         a.innerHTML = tag;
         a.onclick = function() {
            KENTBREW.flickrball.getSet(this.innerHTML);
         };
         theItem.appendChild(a);

         var theTags = $.list.getElementsByTagName('A');
         for (var i = 0; i < theTags.length; i++) {
            if (theTags[i].innerHTML == tag) {
               var removeItem = theTags[i].parentNode;
               removeItem.parentNode.removeChild(removeItem);
            }
         }
         
         if ($.list.getElementsByTagName('LI').length) {
            $.list.insertBefore(theItem, $.list.getElementsByTagName('LI')[0]);
         } else {
            $.list.appendChild(theItem);
         }
         KENTBREW.flickrball.getSet(tag);
      },
      getPage : function(tag) {
        var currentPage = 'null';
        for (var i = 0; i < $.tagsUsed.length; i++) {
           if ($.tagsUsed[i].tag == tag) {
              $.tagsUsed[i].currentPage++;
              if ($.tagsUsed[i].currentPage < $.tagsUsed[i].pagesAvailable) {
                 // add one to page number
                 currentPage = $.tagsUsed[i].currentPage;
              } else {
                 // start over
                 $.tagsUsed[i].currentPage = currentPage = 0;
              }
              break;
           }
        }
        // did not find, add a record
        if (currentPage === 'null') {
           $.tagsUsed[i] = {};
           $.tagsUsed[i].tag = tag;
           currentPage = $.tagsUsed[i].currentPage = $.tagsUsed[i].pagesAvailable = 0;
        }
        return(currentPage);
      },
      pingSet : function(obj) {
         KENTBREW.flickrball.hideFrame();
         $.set.innerHTML = '';
         var tag = $.tagsUsed[$.tagsUsed.length-1].tag;
         for (var t = 0; t < $.tagsUsed.length; t++) {
            if ($.tagsUsed[t].tag == tag) {
               $.tagsUsed[t].pagesAvailable = obj.photos.pages;
               break;
            }
         }         
         for (var i = 0; i < $.photoCount; i++) {
            var pic = obj.photos.photo[i];
            var a = document.createElement('A');
            var img = document.createElement('IMG');
            var div = document.createElement('DIV');
            var x = parseInt(i / $.perRow, 10);
            var y = i % $.perRow;
            img.style.top = ($.cellSize * y) + ($.minSize*2) + 'px';
            img.style.left = ($.cellSize * x) + ($.minSize*2) + 'px';
            img.style.height = $.minSize + 'px';
            img.style.width = $.minSize + 'px';

            div.style.top = ($.cellSize * y) + ($.minSize*2) + 'px';
            div.style.left = ($.cellSize * x) + ($.minSize*2) + 'px';
            div.style.height = $.minSize + 'px';
            div.style.width = $.minSize + 'px';
            div.style.display = 'none';

            if (pic)  {
               var url = 'http://farm' + pic.farm + '.static.flickr.com/' + pic.server + '/' + pic.id + '_' + pic.secret;
               img.src = url + '_s.jpg';
               a.appendChild(img);
               a.id = pic.id;
               a.rel = url + '.jpg';
               a.ver = pic.owner;
               a.title = pic.title;
               a.alt = pic.id;
               a.name = i;
               a.onclick = function() { 
                  KENTBREW.flickrball.getTags(this); 
               };
               a.target = '_blank';
               $.set.appendChild(a);
               $.set.appendChild(div);               
            }
         }
         KENTBREW.flickrball.run();
         $.signature.className = 'signature';
      },
      getTags : function(el) {
         KENTBREW.flickrball.addClick(); 
         var theTags = $.list.getElementsByTagName('A');
         for (var i = 0; i < theTags.length; i++) {
            if (theTags[i].innerHTML == $.currentTag) {
               theItem = theTags[i].parentNode;
               $.list.removeChild(theItem);
            }
         }
         
         if ($.list.getElementsByTagName('LI').length) {
            $.list.insertBefore(theItem, $.list.getElementsByTagName('LI')[0]);
         } else {
            $.list.appendChild(theItem);
         }

         theItem = $.list.getElementsByTagName('LI')[0];

         var img = theItem.getElementsByTagName('IMG')[0];
         if (img) {
            img.parentNode.removeChild(img);
         }
         var theSource = el.getElementsByTagName('IMG')[0].src;
         var theImage = document.createElement('IMG');
         theImage.src = theSource;
         var theLink = theItem.getElementsByTagName('A')[0];
         theItem.insertBefore(theImage, theLink);
         
         $.art.style.backgroundImage = 'url(' + el.rel + ')';
         $.art.style.display = 'block';
         $.showStream.href = 'http://flickr.com/photos/' + el.ver;
         $.showPage.href = 'http://flickr.com/photos/' + el.ver + '/' + el.id + '/';
         $.signature.style.display = 'block';
         $.title.innerHTML = 'Untitled';
         if (el.title) {
            $.title.innerHTML = el.title;
         }
         KENTBREW.flickrball.showFrame();
         if ($.tagScript) {
            $.head.removeChild($.tagScript);
         }
         $.tagScript = document.createElement('script');      
         var uri = 'https://api.flickr.com/services/rest/?method=flickr.tags.getListPhoto&api_key=2c06b7bd1c4c5987f3daea25784f0015&format=json&jsoncallback=KENTBREW.flickrball.pingTags&photo_id=' + el.id;
         KENTBREW.flickrball.runScript($.tagScript, uri);
      },
      hideFrame : function() {
         $.frame.className = 'frame hidden';
         $.run = setInterval("KENTBREW.flickrball.run();",16);
      },
      showFrame : function() {
         clearInterval($.run);
         $.frame.className = 'frame';
      },
      pingTags : function(obj) {
        $.tags.innerHTML = '';
        for (var i = 0; i < obj.photo.tags.tag.length; i++) {
           var a = document.createElement('A');
           a.innerHTML = obj.photo.tags.tag[i].raw.toLowerCase();
           a.onclick = function() { 
              KENTBREW.flickrball.addTag(this.innerHTML); 
           };
           if (i) {
              $.tags.appendChild(document.createTextNode(', '));
           }
           $.tags.appendChild(a);
         }
      },      
      runScript : function(s, uri) {
         s.type ='text/javascript';
         s.charset ='utf-8';
         s.src = uri;
         $.head.appendChild(s);
      },
      moveItem : function(el) {
         var foo = parseInt(el.parentNode.name, 10);
         var x = parseInt(foo / $.perRow, 10) *  $.cellSize;
         var y = (foo % $.perRow) *  $.cellSize;
         var currentSize = el.offsetHeight; 
         var dx = $.cx - x;
         var dy = $.cy - y;
         var dist = Math.sqrt(dx * dx + dy * dy);
         if (dist < $.rad) { 
            $.anim[foo] = true;
            var m = Math.cos(0.5 * Math.PI * Math.abs(dist / $.rad));
            var newDim = parseInt(m * $.w * 2, 10);
            if (newDim > $.minSize) {
               var z = parseInt(m, 10);
               if (z < 1) { z = 1; }
               el.style.zIndex = z;
               el.style.height = el.style.width = newDim + 'px';
               el.style.top = (y - newDim/2 + $.minSize * 2) + ($.minSize/2) + 'px';
               el.style.left = (x - newDim/2 + $.minSize * 2)  + ($.minSize/2) + 'px';
               
               var shadow = KENTBREW.flickrball.getNextSibling(el.parentNode);
               shadow.style.display = 'block';
               shadow.style.zIndex = z-1;
               shadow.style.height = shadow.style.width = newDim + 'px';
               shadow.style.top = (y - newDim/2 + $.minSize * 2) + ($.minSize/2) - newDim/2 + 'px';
               shadow.style.left = (x - newDim/2 + $.minSize * 2)  + ($.minSize/2)  - newDim/2 + 'px';
               
            } else {
               $.anim[foo] = false;
               KENTBREW.flickrball.resetItem(el);
            }
         } else {
            if($.anim[foo]) {
               KENTBREW.flickrball.resetItem(el);
            }
            $.anim[foo] = false;
         }
      },
      resetItem : function(el) {
         var i = parseInt(el.parentNode.name, 10);
         var x = parseInt(i / $.perRow, 10);
         var y = i % $.perRow;
         el.style.top = ($.cellSize * y) + (($.cellSize - $.minSize) / 2) + 'px';
         el.style.left = ($.cellSize * x) + (($.cellSize - $.minSize) / 2) + 'px';
         el.style.height = el.style.width = $.minSize + 'px';
         el.style.zIndex = 1;
         var shadow = KENTBREW.flickrball.getNextSibling(el.parentNode);
         shadow.style.display = 'none';
      },
      getNextSibling : function(el) {
         var nextSib = el.nextSibling;
         if (nextSib && nextSib.nodeType != 1) {
             nextSib = nextSib.nextSibling;
         }
         return nextSib;
      }
   };
}();

window.onload = function() {
  document.getElementById('gotit').onclick = function () {
    document.getElementById('glass').className = 'hidden'
    document.getElementById('intro').className = 'hidden'
  }
  KENTBREW.flickrball.init('flickrball');
};