url to media frame

5 files changed, 954 insertions, 12 deletions

diff --git a/assets/js/app.js b/assets/js/app.js
index f0dd663..89a20f4 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -2,15 +2,16 @@
 	var App = function() {
 		this.initialize = function() {
 			var sample_editor = new SampleEditor();
-			
+
 			sample_editor.initialize();
 		};
-		
-		
+
+
 		return this;
 	};
-	
-	
+
+
 	var app = new App();
 	app.initialize();
-})(jQuery);
\ No newline at end of file
+})(jQuery);
+$.embedly.defaults.key = 'e2dcb7bae5a443bfbb5f726daf05549f';
diff --git a/assets/js/libs/jquery.embedly-3.1.1.min.js b/assets/js/libs/jquery.embedly-3.1.1.min.js
new file mode 100644
index 0000000..85d9aa0
--- /dev/null
+++ b/assets/js/libs/jquery.embedly-3.1.1.min.js
@@ -0,0 +1,6 @@
+/*! Embedly jQuery - v3.1.1 - 2013-06-05
+ * https://github.com/embedly/embedly-jquery
+ * Copyright (c) 2013 Sean Creeley
+ * Licensed BSD
+ */ 
+(function(t){var e={key:null,endpoint:"oembed",secure:null,query:{},method:"replace",addImageStyles:!0,wrapElement:"div",className:"embed",batch:20,urlRe:null},i=/(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/,r=function(t){return null===t||void 0===t},n=function(e,i){var r=[],n=[];return t.each(e,function(t,e){n.push(e),n.length===i&&(r.push(n),n=[])}),0!==n.length&&r.push(n),r},s=function(e){return r(e)?[]:t.isArray(e)?e:[e]},o=function(e){return t.map(e[0],function(i,r){return[t.map(e,function(t){return t[r]})]})},a=function(t,e,i){this.init(t,e,i)};a.prototype={init:function(e){this.urls=e,this.count=0,this.results={},this._deferred=t.Deferred()},notify:function(e){if(this.results[e.original_url]=e,this.count++,this._deferred.notify.apply(this._deferred,[e]),this.count===this.urls.length){var i=this,r=t.map(this.urls,function(t){return i.results[t]});this._deferred.resolve(r)}return this},state:function(){return this._deferred.state.apply(this._deferred,arguments)}},window.Keeper=a;var l=function(){};l.prototype={defaults:{},log:function(t,e){r(window.console)||r(window.console[t])||window.console[t].apply(window.console,[e])},build:function(e,i,n){n=r(n)?{}:n;var s=n.secure;r(s)&&(s="https:"===window.location.protocol?!0:!1);var o=(s?"https":"http")+"://api.embed.ly/"+("objectify"===e?"2/":"1/")+e,a=r(n.query)?{}:n.query;return a.key=n.key,o+="?"+t.param(a),o+="&urls="+t.map(i,encodeURIComponent).join(",")},ajax:function(l,h,u){if(u=t.extend({},e,t.embedly.defaults,"object"==typeof u&&u),r(u.key))return this.log("error","Embedly jQuery requires an API Key. Please sign up for one at http://embed.ly"),null;h=s(h);var d,p=new a(h),c=[],f=[];t.each(h,function(t,e){d=!1,i.test(e)&&(d=!0,null!==u.urlRe&&u.urlRe.test&&!u.urlRe.test(e)&&(d=!1)),d===!0?c.push(e):f.push({url:e,original_url:e,error:!0,invalid:!0,type:"error",error_message:'Invalid URL "'+e+'"'})});var y=n(c,u.batch),m=this;return t.each(y,function(e,i){t.ajax({url:m.build(l,i,u),dataType:"jsonp",success:function(e){t.each(o([i,e]),function(t,e){var i=e[1];i.original_url=e[0],i.invalid=!1,p.notify(i)})}})}),f.length&&setTimeout(function(){t.each(f,function(t,e){p.notify(e)})},1),p._deferred},oembed:function(t,e){return this.ajax("oembed",t,e)},preview:function(t,e){return this.ajax("preview",t,e)},objectify:function(t,e){return this.ajax("objectify",t,e)},extract:function(t,e){return this.ajax("extract",t,e)}};var h=function(){};h.prototype={build:function(e,i,n){n=t.extend({},t.embedly.defaults,"object"==typeof n&&n);var s=n.secure;r(s)&&(s="https:"===window.location.protocol?!0:!1);var o=(s?"https":"http")+"://i.embed.ly/"+("display"===e?"1/":"1/display/")+e,a=r(n.query)?{}:n.query;return a.key=n.key,o+="?"+t.param(a),o+="&url="+encodeURIComponent(i)},display:function(t,e){return this.build("display",t,e)},resize:function(t,e){return this.build("resize",t,e)},fill:function(t,e){return this.build("fill",t,e)},crop:function(t,e){return this.build("crop",t,e)}};var u=function(t,e,i){this.init(t,e,i)};u.prototype={init:function(e,i,r){this.elem=e,this.$elem=t(e),this.original_url=i,this.options=r,this.loaded=t.Deferred();var n=this;this.loaded.done(function(){n.$elem.trigger("loaded",[n])}),this.$elem.trigger("initialized",[this])},progress:function(e){t.extend(this,e),this.options.display?this.options.display.apply(this.elem,[this,this.elem]):"oembed"===this.options.endpoint&&this.display(),this.loaded.resolve(this)},imageStyle:function(){var t,e=[];return this.options.addImageStyles&&(this.options.query.maxwidth&&(t=isNaN(parseInt(this.options.query.maxwidth,10))?"":"px",e.push("max-width: "+this.options.query.maxwidth+t)),this.options.query.maxheight&&(t=isNaN(parseInt(this.options.query.maxheight,10))?"":"px",e.push("max-height: "+this.options.query.maxheight+t))),e.join(";")},display:function(){if("error"===this.type)return!1;this.style=this.imageStyle();var t;"photo"===this.type?(t="<a href='"+this.original_url+"' target='_blank'>",t+="<img style='"+this.style+"' src='"+this.url+"' alt='"+this.title+"' /></a>"):"video"===this.type||"rich"===this.type?t=this.html:(this.title=this.title||this.url,t=this.thumbnail_url?"<img src='"+this.thumbnail_url+"' class='thumb' style='"+this.style+"'/>":"",t+="<a href='"+this.original_url+"'>"+this.title+"</a>",t+=this.provider_name?"<a href='"+this.provider_url+"' class='provider'>"+this.provider_name+"</a>":"",t+=this.description?'<div class="description">'+this.description+"</div>":""),this.options.wrapElement&&(t="<"+this.options.wrapElement+' class="'+this.options.className+'">'+t+"</"+this.options.wrapElement+">"),this.code=t,"replace"===this.options.method?this.$elem.replaceWith(this.code):"after"===this.options.method?this.$elem.after(this.code):"afterParent"===this.options.method?this.$elem.parent().after(this.code):"replaceParent"===this.options.method&&this.$elem.parent().replaceWith(this.code),this.$elem.trigger("displayed",[this])}},t.embedly=new l,t.embedly.display=new h,t.fn.embedly=function(i){if(void 0===i||"object"==typeof i){if(i=t.extend({},e,t.embedly.defaults,"object"==typeof i&&i),r(i.key))return t.embedly.log("error","Embedly jQuery requires an API Key. Please sign up for one at http://embed.ly"),this.each(t.noop);var n={},s=function(e){if(!t.data(t(e),"embedly")){var r=t(e).attr("href"),s=new u(e,r,i);t.data(e,"embedly",s),n.hasOwnProperty(r)?n[r].push(s):n[r]=[s]}},o=this.each(function(){r(t(this).attr("href"))?t(this).find("a").each(function(){r(t(this).attr("href"))||s(this)}):s(this)}),a=t.embedly.ajax(i.endpoint,t.map(n,function(t,e){return e}),i).progress(function(e){t.each(n[e.original_url],function(t,i){i.progress(e)})});return i.progress&&a.progress(i.progress),i.done&&a.done(i.done),o}},t.expr[":"].embedly=function(e){return!r(t(e).data("embedly"))},t.fn.display=function(i,n){if(r(i)&&(i="display"),void 0===n||"object"==typeof n){if(n=t.extend({},e,t.embedly.defaults,"object"==typeof n&&n),r(n.key))return t.embedly.log("error","Embedly jQuery requires an API Key. Please sign up for one at http://embed.ly/display"),this.each(t.noop);var s=function(e){var r=t(e);if(!r.data("display")){var s=r.data("src")||r.attr("href"),o={original_url:s,url:t.embedly.display.build(i,s,n)};r.data("display",o),r.trigger("initialized",[e]);var a="<img src='"+o.url+"' />";r.is("a")?r.append(a):r.replaceWith(a)}},o=function(e){return r(t(e).data("src"))&&r(t(e).attr("href"))?!1:!0},a=this.each(function(){o(this)?s(this):t(this).find("img,a").each(function(){o(this)&&s(this)})});return a}},t.expr[":"].display=function(e){return!r(t(e).data("display"))}})(jQuery,window);
\ No newline at end of file
diff --git a/assets/js/libs/player.js b/assets/js/libs/player.js
new file mode 100644
index 0000000..bcdb72b
--- /dev/null
+++ b/assets/js/libs/player.js
@@ -0,0 +1,365 @@
+
+/*
+* Right now I can only assume that we are going with Open Player, or OmniPlayer
+* for this bad boy. OP seems like a good idea. OP.Player(iframe);
+*/
+
+var OP = {};
+
+OP.DEBUG = false;
+OP.POST_MESSAGE = !!window.postMessage;
+
+/*
+* Utils.
+*/
+OP.origin = function(url){
+  // Grab the origin of a URL
+  if (url.substr(0, 2) === '//'){
+    url = window.location.protocol + url;
+  }
+
+  return url.split('/').slice(0,3).join('/');
+};
+
+OP.addEvent = function(elem, type, eventHandle) {
+  if (!elem) { return; }
+  if ( elem.addEventListener ) {
+    elem.addEventListener( type, eventHandle, false );
+  } else if ( elem.attachEvent ) {
+    elem.attachEvent( "on" + type, eventHandle );
+  } else {
+    elem["on"+type]=eventHandle;
+  }
+};
+
+// usage: log('inside coolFunc',this,arguments);
+// http://paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
+OP.log = function(){
+  OP.log.history = OP.log.history || [];   // store logs to an array for reference
+  OP.log.history.push(arguments);
+  if(window.console && OP.DEBUG){
+    window.console.log( Array.prototype.slice.call(arguments) );
+  }
+};
+
+OP.Listeners = function(){
+  this.init();
+};
+
+OP.Listeners.prototype.init = function(){
+  this.data = {};
+};
+
+OP.Listeners.prototype.getUUID = function(){
+  // Create a random id. #http://stackoverflow.com/a/2117523/564191
+  return 'listener-xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = Math.random()*16|0, v = c === 'x' ? r : (r&0x3|0x8);
+      return v.toString(16);
+  });
+};
+
+OP.Listeners.prototype.has = function(id){
+  return this.data.hasOwnProperty(id);
+};
+
+OP.Listeners.prototype.add = function(id, event, cb, ctx, one){
+  var d = {
+    event: event,
+    cb: cb,
+    ctx: ctx,
+    one: one
+  };
+
+  if (this.has(id)){
+    this.data[id].push(d);
+  } else {
+    this.data[id] = [d];
+  }
+};
+
+OP.Listeners.prototype.execute = function(id, data){
+  if (!this.has(id)){
+    return false;
+  }
+
+  var keep = [];
+  for (var i=0; i< this.data[id].length; i++){
+    var d = this.data[id][i];
+
+    d.cb.call(d.ctx? d.ctx: window, data);
+
+    if (d.one === false){
+      keep.push(d);
+    }
+  }
+
+  if (keep.length === 0){
+    delete this.data[id];
+  } else {
+    this.data[id] = keep;
+  }
+};
+
+OP.Listeners.prototype.on = function(id, event, cb, ctx){
+  this.add(id, event, cb, ctx, false);
+};
+
+OP.Listeners.prototype.one = function(id, event, cb, ctx){
+  this.add(id, event, cb, ctx, true);
+};
+
+OP.Listeners.prototype.off = function(event, cb){
+  // We should probably restructure so this is a bit less of a pain.
+  var keys = [];
+  for(var k in this.data){
+    keys.push(k);
+  }
+
+  var listeners = [];
+
+  for (var i in keys){
+
+    var values = this.data[keys[i]];
+    var keep = [];
+
+    for (var j in values){
+      var data = values[j];
+      if (data.event === event && data.cb === cb){
+        listeners.push(keys[i]);
+      } else {
+        keep.push(data);
+      }
+    }
+
+    if (keep.length === 0){
+      delete this.data[keys[i]];
+    } else {
+      this.data[keys[i]] = keep;
+    }
+  }
+  return listeners;
+};
+
+OP.Player = function(elem){
+  this.init(elem);
+};
+
+
+OP.Player.EVENTS = {
+  // Stop Events.
+  PLAY: 'play',
+  PAUSE: 'pause',
+  FINISH: 'finish',
+  SEEK: 'seek',
+
+  // Progress Events
+  PLAY_PROGRESS: 'playProgress',
+  LOAD_PROGRESS: 'load-progress'
+};
+
+OP.Player.prototype.init = function(elem){
+  this.elem = elem;
+
+  // Figure out the origin of where we are sending messages.
+  this.origin = OP.origin(elem.src);
+
+  // Event handling.
+  this.listeners = new OP.Listeners();
+
+  // Queuing before ready.
+  this.isReady = false;
+  this.queue = [];
+
+  if (OP.POST_MESSAGE){
+    // Set up the reciever.
+    var self = this;
+    OP.addEvent(window, 'message', function(e){
+      self.receive(e);
+    });
+  } else {
+    OP.log('Post Message is not Available.');
+  }
+};
+
+OP.Player.prototype.send = function(data, callback, ctx){
+  // We are expecting a response.
+  if (callback) {
+    // Create a UUID
+    var id = this.listeners.getUUID();
+
+    // Set the listener.
+    data.listener = id;
+
+    // Only hang on to this listener once.
+    this.listeners.one(id, null, callback, ctx);
+  }
+
+  if (!this.isReady){
+    this.queue.push(data);
+    return false;
+  }
+
+  OP.log('Player.send', data, this.origin);
+  this.elem.contentWindow.postMessage(JSON.stringify(data), this.origin);
+  return true;
+};
+
+OP.Player.prototype.receive = function(e){
+  OP.log('Player.receive', e);
+  if (e.origin !== this.origin){
+    return false;
+  }
+
+  var data;
+  try {
+    data = JSON.parse(e.data);
+  } catch (err){
+    // Not a valid response.
+    return false;
+  }
+
+  // We need to determine if we are ready.
+  if (data.method === 'ready'){
+    this.ready();
+  }
+
+  if (this.listeners.has(data.listener)){
+    this.listeners.execute(data.listener, data.value);
+  }
+};
+
+
+OP.Player.prototype.ready = function(){
+
+  if (this.isReady === true){
+    return false;
+  }
+
+  // set ready.
+  this.isReady = true;
+
+  // Clear the queue
+  for (var i=0; i<this.queue.length; i++){
+    OP.log('Player.dequeue', this.queue[i]);
+    this.send(this.queue[i]);
+  }
+  this.queue = [];
+};
+
+OP.Player.prototype.connect = function(callback, ctx){
+  var id = this.listeners.getUUID();
+  this.listeners.one(id, 'ready', callback, ctx);
+
+  if (this.isReady){
+    this.listeners.execute(id);
+  } else {
+    // We need to give the option to connect after we play.
+    this.elem.contentWindow.postMessage(JSON.stringify({
+      method:'ready',
+      listener: id
+    }), this.origin);
+  }
+};
+
+OP.Player.prototype.on = function(event, callback, ctx){
+  var id = this.listeners.getUUID();
+
+  this.listeners.on(id, event, callback, ctx);
+
+  this.send({
+    method: 'addEventListener',
+    event: event,
+    listener: id
+  });
+
+  return true;
+};
+
+OP.Player.prototype.off = function(event, callback){
+
+  var listeners = this.listeners.off(event, callback);
+
+  if (listeners.length > 0) {
+    for (var i in listeners){
+      this.send({
+        method: 'removeEventListener',
+        event: event,
+        listener: listeners[i]
+      });
+      return true;
+    }
+  }
+
+  return false;
+};
+
+OP.Player.prototype.play = function(){
+  this.send({
+    method: 'play'
+  });
+};
+
+OP.Player.prototype.pause = function(){
+  this.send({
+    method: 'pause'
+  });
+};
+
+OP.Player.prototype.paused = function(callback, ctx){
+  this.send({
+    method: 'paused'
+  }, callback, ctx);
+};
+
+OP.Player.prototype.mute = function(){
+  this.send({
+    method: 'mute'
+  });
+};
+
+OP.Player.prototype.unmute = function(){
+  this.send({
+    method: 'unmute'
+  });
+};
+
+OP.Player.prototype.isMuted = function(callback, ctx){
+  this.send({
+    method: 'isMuted'
+  }, callback, ctx);
+};
+
+OP.Player.prototype.getVolume = function(callback, ctx){
+  this.send({
+    method: 'getVolume'
+  }, callback, ctx);
+};
+
+OP.Player.prototype.setVolume = function(value){
+  this.send({
+    method: 'setVolume',
+    value: value
+  });
+};
+
+OP.Player.prototype.getDuration = function(callback, ctx){
+  this.send({
+    method: 'getDuration'
+  }, callback, ctx);
+};
+
+OP.Player.prototype.seekTo = function(value){
+  this.send({
+    method: 'seekTo',
+    value: value
+  });
+};
+
+OP.Player.prototype.currentTime = function(callback, ctx){
+  this.send({
+    method: 'currentTime'
+  }, callback, ctx);
+};
+
+// Set the global.
+window.OP = OP;
diff --git a/assets/js/libs/utils.js b/assets/js/libs/utils.js
new file mode 100644
index 0000000..6fee040
--- /dev/null
+++ b/assets/js/libs/utils.js
@@ -0,0 +1,557 @@
+
+var _ = {};
+
+// Random Conts
+var breaker = {};
+
+var ArrayProto = Array.prototype,
+  ObjProto = Object.prototype,
+  FuncProto = Function.prototype;
+
+var
+  push             = ArrayProto.push,
+  slice            = ArrayProto.slice,
+  concat           = ArrayProto.concat,
+  toString         = ObjProto.toString,
+  hasOwnProperty   = ObjProto.hasOwnProperty;
+
+var
+  nativeForEach      = ArrayProto.forEach,
+  nativeMap          = ArrayProto.map,
+  nativeReduce       = ArrayProto.reduce,
+  nativeReduceRight  = ArrayProto.reduceRight,
+  nativeFilter       = ArrayProto.filter,
+  nativeEvery        = ArrayProto.every,
+  nativeSome         = ArrayProto.some,
+  nativeIndexOf      = ArrayProto.indexOf,
+  nativeLastIndexOf  = ArrayProto.lastIndexOf,
+  nativeIsArray      = Array.isArray,
+  nativeKeys         = Object.keys,
+  nativeBind         = FuncProto.bind;
+
+_.each = function(obj, iterator, context) {
+    if (obj == null) { return; }
+    if (nativeForEach && obj.forEach === nativeForEach) {
+        obj.forEach(iterator, context);
+    } else if (obj.length === +obj.length) {
+        for (var i = 0, l = obj.length; i < l; i++) {
+            if (i in obj && iterator.call(context, obj[i], i, obj) === breaker) { return; }
+        }
+    } else {
+        for (var key in obj) {
+            if (hasOwnProperty.call(obj, key)) {
+                if (iterator.call(context, obj[key], key, obj) === breaker) { return; }
+            }
+        }
+    }
+};
+
+_.map = function(obj, iterator, context) {
+  var results = [];
+  if (obj == null) {
+    return results;
+  }
+  if (Array.prototype.map && obj.map === Array.prototype.map){
+    return obj.map(iterator, context);
+  }
+  _.each(obj, function(value, index, list) {
+    results[results.length] = iterator.call(context, value, index, list);
+  });
+  return results;
+};
+
+// From: http://bit.ly/T9SjVv
+_.zip = function(arrays) {
+  return _.map(arrays[0], function(_,i){
+    return _.map(arrays, function(array){return array[i];});
+  });
+};
+
+_.extend = function(obj) {
+    _.each(Array.prototype.slice.call(arguments, 1), function(source) {
+        for (var prop in source) {
+            if (source[prop] !== void 0){ obj[prop] = source[prop]; }
+        }
+    });
+    return obj;
+};
+
+
+var ctor = function(){};
+
+_.bind = function(func, context) {
+  var args, bound;
+  if (nativeBind && func.bind === nativeBind) {
+    return nativeBind.apply(func, slice.call(arguments, 1));
+  }
+  if (!_.isFunction(func)) {
+    throw new TypeError;
+  }
+  args = slice.call(arguments, 2);
+  return bound = function() {
+    if (!(this instanceof bound)) {
+      return func.apply(context, args.concat(slice.call(arguments)));
+    }
+    ctor.prototype = func.prototype;
+    var self = new ctor;
+    ctor.prototype = null;
+    var result = func.apply(self, args.concat(slice.call(arguments)));
+    if (Object(result) === result) { return result; }
+    return self;
+  };
+};
+
+_.trim = function(str){
+   return str.replace(/^\s+|\s+$/g, '');
+};
+
+
+/* is Functions*/
+
+// from a comment on http://dbj.org/dbj/?p=286
+// fails on only one very rare and deliberate custom object:
+// var bomb = { toString : undefined, valueOf: function(o) { return "function BOMBA!"; }};
+_.isFunction = function (f) {
+    try {
+        return (/^\s*\bfunction\b/).test(f);
+    } catch (x) {
+        return false;
+    }
+};
+
+_.isNone = function(obj){
+  return (obj === null || obj === undefined);
+};
+_.isString = function(obj){
+  return toString.call(obj) === "[object String]";
+};
+_.isNumber = function(obj){
+  return toString.call(obj) === "[object Number]";
+};
+_.isDate = function(obj){
+  return toString.call(obj) === "[object Date]";
+};
+_.isObject = function(obj){
+  return toString.call(obj) === "[object Object]";
+};
+_.isArray = function(obj){
+  return toString.call(obj) === "[object Array]";
+};
+_.isElement = function(obj){
+  return (!_.isNone(obj) && !_.isNone(obj.nodeType) && obj.nodeType === 1);
+};
+
+_.isEmptyObject = function(obj) {
+    if (_.isObject(obj)) {
+        for (var key in obj) {
+            if (hasOwnProperty.call(obj, key)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    return false;
+};
+
+/* Simple JavaScript Inheritance
+ * By John Resig http://ejohn.org/
+ * MIT Licensed.
+ */
+// Inspired by base2 and Prototype
+(function(_){
+  var initializing = false, fnTest = (/xyz/).test(function(){xyz;}) ? /\b_super\b/ : /.*/;
+
+  // The base Class implementation (does nothing)
+  _.Class = function(){};
+
+  // Create a new Class that inherits from this class
+  _.Class.extend = function(prop) {
+    var _super = this.prototype;
+
+    // Instantiate a base class (but only create the instance,
+    // don't run the init constructor)
+    initializing = true;
+    var prototype = new this();
+    initializing = false;
+
+    // Copy the properties over onto the new prototype
+    for (var name in prop) {
+      // Check if we're overwriting an existing function
+      prototype[name] = typeof prop[name] === "function" &&
+        typeof _super[name] === "function" && fnTest.test(prop[name]) ?
+        (function(name, fn){
+          return function() {
+            var tmp = this._super;
+
+            // Add a new ._super() method that is the same method
+            // but on the super-class
+            this._super = _super[name];
+
+            // The method only need to be bound temporarily, so we
+            // remove it when we're done executing
+            var ret = fn.apply(this, arguments);
+            this._super = tmp;
+
+            return ret;
+          };
+        })(name, prop[name]) :
+        prop[name];
+    }
+
+    // The dummy class constructor
+    function Class() {
+      // All construction is actually done in the init method
+      if ( !initializing && this.init ){
+        this.init.apply(this, arguments);
+      }
+    }
+
+    // Populate our constructed prototype object
+    Class.prototype = prototype;
+
+    // Enforce the constructor to be what we expect
+    Class.prototype.constructor = Class;
+
+    // And make this class extendable
+    Class.extend = arguments.callee;
+
+    return Class;
+  };
+})(_);
+
+
+/* UUID */
+_.getUUID = function(){
+  return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = Math.random()*16|0, v = c === 'x' ? r : (r&0x3|0x8);
+      return v.toString(16);
+  });
+};
+
+
+/* SELECTORS */
+_.getElementsByClassName = function(cls, tag){
+  var elements = [];
+  if (_.isFunction(document.getElementsByClassName)){
+    _.each(document.getElementsByClassName(cls), function(e){
+      elements.push(e);
+    });
+    return elements;
+  }
+
+  if (_.isNone(tag)){
+    tag = '*';
+  }
+
+  var tags = document.getElementsByTagName(tag);
+
+  _.each(tags, function(elem){
+    if ((' ' + elem.className + ' ').indexOf(' '+cls+' ') > -1) {
+      elements.push(elem);
+    }
+  });
+  return elements;
+};
+
+_.getElementByClassName = function(cls, tag){
+  var elements = _.getElementsByClassName(cls, tag);
+  if (elements.length === 0){
+    return null;
+  }
+  return elements[0];
+};
+
+/* DOM */
+_.createElement = function(tag, attrs){
+  // create the iframe.
+  var elem = document.createElement(tag);
+
+  _.each(attrs, function(v, k){
+    elem.setAttribute(k, v);
+  });
+
+  return elem;
+};
+
+_.getChildren = function(elem, nodeName){
+  var e = [];
+
+  if (_.isString(nodeName)){
+    nodeName = nodeName.toUpperCase();
+  }
+
+  _.each(elem.childNodes, function(node){
+    if (_.isElement(node)){
+      if (!_.isNone(nodeName) && nodeName !== node.nodeName){
+        return false;
+      }
+      e.push(node);
+    }
+  });
+  return e;
+};
+
+_.getChild = function(elem, tagName){
+  /* gets the first child of the tag name.*/
+  var e = _.getChildren(elem, tagName);
+
+  if (e.length !== 0){
+    return e[0];
+  }
+  return null;
+};
+
+_.getTextContent = function(node){
+  return node.innerText || node.textContent;
+};
+
+_.setTextContent = function(node, text){
+  var prop = node.textContent === undefined ? 'innerText' : 'textContent';
+  node[prop] = text;
+};
+
+_.hasClass = function(elem, cls){
+  var kls = elem.getAttribute('class');
+
+  if (_.isNone(kls)){
+    return false;
+  }
+
+  if ((' '+kls+' ').indexOf(' '+cls+' ') > -1){
+    return true;
+  }
+  return false;
+};
+
+_.addClass = function(elem, cls){
+  var kls = elem.getAttribute('class');
+
+  if (_.isNone(kls)){
+    elem.setAttribute('class', cls);
+    return true;
+  }
+
+  var parts = kls.split(' '),
+    results = [];
+
+  _.map(parts, function(part){
+    var p = _.trim(part);
+
+    if (p !== ''){
+      results.push(p);
+    }
+  });
+
+  results.push(cls);
+
+  elem.setAttribute('class', results.join(' '));
+};
+
+_.removeClass = function(elem, cls){
+  var kls = elem.getAttribute('class');
+
+  if (_.isNone(kls)){
+    return true;
+  }
+
+  var parts = kls.split(' '),
+    results = [];
+
+  _.map(parts, function(part){
+    var p = _.trim(part);
+
+    if (p !== '' && p !== cls){
+      results.push(p);
+    }
+  });
+
+  elem.setAttribute('class', results.join(' '));
+};
+
+_.getData = function(e, attr){
+  if (!_.isNone(e.dataset)){
+    var parts = attr.split('-');
+
+    if (parts.length > 1){
+      attr = parts[0];
+      attr += _.map(parts.slice(1), function(p){return p[0].toUpperCase() + p.substr(1);}).join('');
+    }
+
+
+    // Just so it's null instead of undefined
+    return _.isNone(e.dataset[attr])? null: e.dataset[attr];
+  }
+  return e.getAttribute('data-'+attr);
+};
+
+
+_.parseStyle = function(style){
+  var data = {};
+
+  if (_.isNone(style)) { return data;}
+
+  _.each(style.split(';'), function(s){
+    var p = s.split(':');
+    data[_.trim(p[0])] = _.trim(p[1]);
+  });
+
+  return data;
+};
+
+_.createStyle = function(data){
+  var parts = [];
+  _.each(data, function(v,k){
+    parts.push(k+':'+v);
+  });
+  return parts.join(';');
+};
+
+
+/* EVENTS */
+
+_.addEvent = function(elem, type, eventHandle) {
+  if (_.isNone(elem)) { return; }
+  if ( elem.addEventListener ) {
+    elem.addEventListener( type, eventHandle, false );
+  } else if ( elem.attachEvent ) {
+    elem.attachEvent( "on" + type, eventHandle );
+  } else {
+    elem["on"+type]=eventHandle;
+  }
+};
+
+_.detachEvent = function(elem, type, eventHandle) {
+  if (_.isNone(elem)) { return; }
+  if ( elem.removeEventListener ) {
+    elem.removeEventListener( type, eventHandle, false );
+  } else if ( elem.detachEvent ) {
+    elem.detachEvent( "on" + type, eventHandle );
+  } else {
+    elem["on"+type]=null;
+  }
+};
+
+/* URL */
+_.parseQuery = function(query){
+  var data = {};
+
+  if (query.substr(0,1) === '#' || query.substr(0,1) === '?'){
+    query = query.substr(1);
+  }
+
+  var parts = query.split('&');
+
+  _.each(parts, function(part){
+    var p = part.split('=');
+    data[decodeURIComponent(p[0])] = decodeURIComponent(p[1]);
+  });
+  return data;
+};
+
+_.createQuery = function(data){
+  var parts = [],
+    query = '';
+
+  _.each(data, function(v, k){
+    parts.push(k+'='+encodeURIComponent(v));
+  });
+
+  return parts.join('&');
+};
+
+_.appendQuery = function(src, query){
+  var parts = src.split('?');
+
+  if (parts.length === 2){
+    var data = _.parseQuery(parts[1]);
+    data = _.extend(data, query);
+
+    return parts[0] +'?'+ _.createQuery(data);
+
+  } else {
+    return src +'?'+ _.createQuery(query);
+  }
+};
+
+_.getOrigin = function(url){
+  return url.split('/').slice(0,3).join('/');
+};
+
+_.parseHost = function(url){
+  if (_.isNone(url)){
+    return null;
+  }
+  try {
+    return url.split('//')[1].split('/')[0];
+  } catch (err){
+    return null;
+  }
+};
+
+
+/* IMGAGES */
+//IMAGES
+
+/**
+ * I want a consistent way to pick an i#{n).embed.ly server to use, so the
+ * browser can effeciently cache images. So we use abs(hash(url)) % 10
+ *
+ * this hashing function discussion at:
+ * http://werxltd.com/wp/2010/05/13/
+ *   javascript-implementation-of-javas-string-hashcode-method/
+ */
+_.hashCode = function(str){
+  var hash = 0, i, ch;
+  if (str.length === 0) {
+    return hash;
+  }
+  for (i = 0; i < str.length; i++) {
+    ch = str.charCodeAt(i);
+    hash = ((hash<<5)-hash)+ch;
+    hash = hash & hash; // Convert to 32bit integer
+  }
+  return hash;
+};
+
+_.isGif = function(url){
+  if (_.isNone(url)){
+    return false;
+  }
+  return (/.gif/i).test(url);
+};
+
+
+_.generateImage = function(url, width, height, options){
+  var method,
+    data = {
+      key: 'fd92ebbc52fc43fb98f69e50e7893c13',
+      url: url,
+      errorurl: 'http://4.bp.blogspot.com/-_Gx8wi1NZf0/TW_S5s4MibI/' +
+                'AAAAAAAAAT4/HQj19wUqfLA/s320/missin.gif'
+      //t: Math.ceil(Math.random() * 10000)
+    };
+
+  // Add our options.
+  data = _.extend(data, _.isNone(options)? {}: options);
+
+  if (width || height) {
+    method = 'crop';
+  } else {
+    method = 'resize';
+  }
+
+  if (width){
+    data.width = width;
+  }
+  if (height){
+    data.height = height;
+  }
+
+  var iServerNum = Math.abs(_.hashCode(url)) % 10;
+  return 'http://i-cdn.embed.ly/1/image/'+method+'?'+_.createQuery(data);
+};
+
+
+if (window.EMB_DEBUG === true){
+  window._ = _;
+}
diff --git a/assets/js/sample.js b/assets/js/sample.js
index 1784e86..4297ccd 100644
--- a/assets/js/sample.js
+++ b/assets/js/sample.js
@@ -5,15 +5,28 @@ function Sample(url){
   this.duration;
   this.key;
   this.player; //the associated player obj w the iframe
-  this.init();
   this.id;
+  this.iframe;
+  this.init();
 }
 
-Sample.prototype.init(){
-  //create the iframe
-
-  //create the player
-
+Sample.prototype.init = function(){
+  var that = this;
+  $.embedly.oembed(this.url).done(function(results){
+    var BASE_IFRAME = "http://cdn.embedly.com/widgets/media.html";
+    var data = results[0];
+    var f= data.html;
+    var src = $(f)[0].src;
+    var schema = data.provider_name.toLowerCase();
+    var iframe_src= BASE_IFRAME +"?schema="+schema+"&type=text%2Fhtml&html="+src;
+    var iframe = $('<iframe/>', {
+      src: iframe_src
+    });
+    $('body').append(iframe[0]);
+    var player = new OP.Player(iframe[0]);
+    that.player = player;
+    that.iframe = iframe;
+  });
 }
 
 Sample.prototype.play = function(){