(function ($, window, undefined) {
	$.fn.marqueeify = function (options) {
		var settings = $.extend({
			horizontal: true,
			vertical: true,
			speed: 100, // In pixels per second
			color: "#00ffff",
      zindex: 0,
			container: $(this).parent(),
			bumpEdge: function () {}
		}, options);
		
		return this.each(function () {
			var containerWidth, containerHeight, elWidth, elHeight, move, getSizes,
				$el = $(this);

			getSizes = function () {
				containerWidth = settings.container.outerWidth();
				containerHeight = settings.container.outerHeight();
				elWidth = $el.outerWidth();
				elHeight = $el.outerHeight();
			};

			move = {
				right: function () {
          $el.css("z-index", Math.round(settings.zindex));
					$el.animate({left: (containerWidth - elWidth)}, {duration: ((containerWidth/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
						settings.bumpEdge();
						move.left();
					}});
				},
				left: function () {
          $el.css("z-index", Math.round(settings.zindex));
					$el.animate({left: 0}, {duration: ((containerWidth/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
						settings.bumpEdge();
						move.right();
					}});
				},
				down: function () {
          $el.css("z-index", Math.round(settings.zindex));
					$el.animate({top: (containerHeight - elHeight)}, {duration: ((containerHeight/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
						settings.bumpEdge();
						move.up();
					}});
				},
				up: function () {
          $el.css("z-index", Math.round(settings.zindex));
					$el.animate({top: 0}, {duration: ((containerHeight/settings.speed) * 1000), queue: false, easing: "linear", complete: function () {
						settings.bumpEdge();
						move.down();
					}});
				}
			};

			getSizes();

			if (settings.horizontal) {
				move.right();
			}
			if (settings.vertical) {
				move.down();
			}

      // Make that shit responsive!
      $(window).resize( function() {
        getSizes();
      });
		});
	};
})(jQuery, window);

$(document).ready( function() {

  $(".eyecandy").bind('my-event', function(event) {
    alert(event);
  });

  $("#mySecondDiv").trigger('my-event', [1, 2]);

  $('.eyecandy').on( "click", function() {
    $(this).toggleClass("clicked");
    // $(this).marqueeify({
    //   speed: Math.random()*420,
    //   bumpEdge: function () {
    //     var newColor = "hsl(" + Math.floor(Math.random()*360) + ", 100%, 50%)";
    //     $('.marquee').css('background', newColor);
    //     $(this)[0].speed = Math.random()*420;
    //   }
    // });
  } );

$('.eyecandy').marqueeify({
		speed: 300,
		bumpEdge: function () {
      // svg bgcolor
			// var newColor = "hsl(" + Math.floor(Math.random()*360) + ", 100%, 50%)";
      var newColor = Math.floor(Math.random()*16777215).toString(16);
			// console.log($(this)[0].self);
      // console.log($(this)[0].color);
      // console.log($(this)[0].self);
        // .css("background-color", "#" + newColor);
        //.css("background-color", "#00ffff");
      $(this)[0].speed = Math.random()*420;
      $(this)[0].zindex = Math.random()*20;
        // .parent.css("display", "none");
      // console.log(this);
      // delete this;
		}
	});

  // $( ".eyecandy" ).draggable({
  //   addClasses: true
  // });
  $("#home-headline").draggable({
    addClasses: true
  });
});