if(typeof(jQuery) == "undefined")
document.write("");
VisuallyConstants = {
env: "http://visual.ly/embeder/",
root: "http://visual.ly/"
}
VisuallyEmbeder = function(_obj){
//report this call
this.report(_obj);
//load the external scripts
this.script(_obj);
//set all the additional html needed
this.html(_obj);
var _this = this;
//set all the css rules needed
_obj.load(function(){
_this.css(_obj);
}).each(function(){
if(this.complete) jQuery(this).trigger("load");
});
//set the events for it
_obj.load(function(){
_this.events(_obj);
}).each(function(){
if(this.complete) jQuery(this).trigger("load");
});
};
VisuallyEmbeder.prototype.report = function(_obj){
var $e = this.elements(_obj);
this._type = $e.embeder.attr('rel');
jQuery.getJSON(VisuallyConstants.root + "dstats/embed?callback=?",{
path: document.location.href,
info: $e.more.attr("href")
},function(d){
});
}
VisuallyEmbeder.prototype.script = function(_obj){
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", VisuallyConstants.env + "zclip.js");
try{
document.getElementsByTagName("head")[0].appendChild(fileref);
}catch(ex)
{
}
}
VisuallyEmbeder.prototype.center = function(_obj){
var $e = this.elements(_obj);
var left = (jQuery(document).width() - $e.lightbox.width())/2;
if(left <50)
{
//resize the image to be smaller
var images = $e.lightbox.find("img");
if(images.length > 0)
{
var image_src = jQuery(images[0]).attr("src");
var image_array = image_src.split(".");
//we presume that the last one is the extension of the file
if(image_array.length >= 2)
{
var width = (jQuery(document).width() - 100);
image_array[image_array.length-2] += ("_w" + width);
jQuery(images[0]).attr("width", width);
jQuery(images[0]).attr("src", image_array.join("."));
jQuery(images[0]).load(function(){
jQuery(this).show();
left = (jQuery(document).width() - $e.lightbox.width()) / 2;
$e.lightbox.css("left", left+"px");
});
}
}
}else
{
left = Math.ceil(left);
jQuery(".visually_lightbox").css("left", left);
}
}
VisuallyEmbeder.prototype.events = function(_obj){
var $e = this.elements(_obj);
var $this = this;
$e.enlarge.unbind().click(function(){
if($this._type == undefined || $this._type == "infographic"){
var scroll = jQuery(window).scrollTop() + 20;
$this.center(_obj);
jQuery(".visually_lightbox_overlay").show();
jQuery(".visually_lightbox[data-id='"+$e.infographic.attr('data-id')+"']").show();
$e.lightbox.css('position','absolute').css('top',scroll+'px');
}
else if($this._type == "interactive"){
window.location.href = $e.more.attr('href') + "?view=true";
}
});
$e.overlay.unbind().click(function(){
if($this._type == undefined || $this._type == "infographic"){
var scroll = jQuery(window).scrollTop() + 20;
$this.center(_obj);
jQuery(".visually_lightbox_overlay").show();
jQuery(".visually_lightbox[data-id='"+$e.infographic.attr('data-id')+"']").show();
$e.lightbox.css('position','absolute').css('top',scroll+'px');
}
else if($this._type == "interactive"){
window.location.href = $e.more.attr('href') + "?view=true";
}
});
$e.grab.unbind().click(function(){
jQuery(".visually_embed").find(".visually_embed_grab_code").toggle();
try{
$e = jQuery(".visually_embed_input");
if($e.zclip != undefined)
{
$e.zclip({
path: VisuallyConstants.env + 'ZeroClipboard.swf',
copy: function () {
$e = jQuery(".visually_embed_input");
return $e.val();
}
});
}
}catch(ex){}
});
$e.grabber.find("input").unbind().click(function(){
jQuery(this).select();
});
$e.grabber.find("input").keydown(function(){
jQuery(this).select();
});
$e.grabber.find("input").focus(function(){
jQuery(this).select();
});
$e.embeder.mouseleave(function(){
jQuery(".visually_embed").find(".visually_embed_grab_code").hide();
});
jQuery(".visually_lightbox_overlay").unbind().click(function(){
jQuery(".visually_lightbox_overlay").hide();
jQuery(".visually_lightbox").hide();
});
jQuery(".visually_embed_lightbox_close").unbind().click(function(){
jQuery(".visually_lightbox_overlay").hide();
jQuery(".visually_lightbox").hide();
});
};
VisuallyEmbeder.prototype.css = function(_obj){
var $e = this.elements(_obj);
//if($e.infographic.height() == 0)
//return;
//clearInterval(_visuallyLoaded);
//show the infographic
$e.infographic.show();
//set the sizes of the embeder
$e.embeder.css('width', $e.infographic.width());
$e.embeder.css('height', $e.infographic.height() + 40);
//set the sizes of the embeder
$e.overlay.css('width', $e.infographic.width());
$e.overlay.css('height', $e.infographic.height());
$e.bar.css('position', "absolute");
$e.bar.css('top', $e.infographic.height());
$e.bar.css('width', $e.infographic.width());
$e.embeder.css('width', $e.infographic.width());
$e.embeder.css('height', $e.infographic.height() + 40);
};
VisuallyEmbeder.prototype.elements = function(_obj){
var parent = jQuery(_obj).parents('.visually_embed');
return {
embeder : parent,
infographic: parent.find("img.visually_embed_infographic"),
more : parent.find("a#visually_embed_view_more"),
bar : parent.find(".visually_embed_bar"),
enlarge : parent.find("a#visually_embed_enlarge"),
grab : parent.find("a#visually_embed_grab"),
overlay : parent.find(".visually_embed_overlay[data-id='"+_obj.attr('data-id')+"']"),
grabber : parent.find(".visually_embed_grab_code"),
input : parent.find(".visually_embed_input"),
lightbox : jQuery("body").find(".visually_lightbox[data-id='"+_obj.attr('data-id')+"']")
};
};
VisuallyEmbeder.prototype.html = function(_obj){
var $e = this.elements(_obj);
$e.infographic.attr('data-id',_visuallyCounter);
$e.embeder.append(jQuery(""));
$e.embeder.append(jQuery(""));
$e.embeder.append(jQuery(""));
$e.embeder.append(jQuery("
Embed the above image on your site
"));
var body = jQuery("body");
if(body.length != 1)
alert('You have no body defined. Please define one in order to properly embed Visually\'s Infographics');
var image = $e.infographic.attr("rel");
body.append("");
body.append("
