<!-- Template ID = 18948 Template Name = MediaBrix SocialFlex 1.5 [NOT FOR PRODUCTION] -->
<script type="text/javascript">
var mb_payload = {
"euui" : "%ebuy!", //populated from mediabrix metrics server
"myfbuserid" : null, // From publisher
"orderName" : "FY12_WADMC", //manually entered in DFP
"adid" : "%eaid!", //ad id from DFP macro
"crid" : "%ecid!", //creative id from DFP macro
"siteName" : "%s", //site name from DFP
"postUrl" : "//metrics-us.
mediabrix.com/", //Domain of the metrics server
"host" : document.domain,
"session" : null,
"uniqueID" : null,
"product_type" : "socialFlex"
};
var mbrix = {
mbType : "%eenv!",
time_to : "",
timer_count : 5,
mbVars : {
"share" : [],
"youtube" : "",
"twitter" : "",
"tweetText" : "",
"linkedin" : "",
"clickURL" : "%c%u",
"vidDuration" : 15,
"vastID" : "10b7dba9-b7cc-4cc3-8a36-01a1d57f4062",
"autoplay" : true
},
appendStyles : function(){
+' #mb_canvas.jstag { border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow:0px 0px 5px #000; -moz-box-shadow:0px 0px 5px #000; -webkit-box-shadow:0px 0px 5px #000; }'
+' #mb_canvas { font-family:Lucida Grande, Arial; overflow:hidden; width:644px; height:494px; border:3px solid #395197; margin:0 auto; margin-top:'+mbrix.mbVars.top+'px; }'
+' #mb_close { margin-top:9px; top:'+mbrix.mbVars.top+'px; }'
+' #mb_branded_bg { float:left; width:644px; height:449px; overflow:hidden; background:url(\''+mbrix.mbVars.bg+'\') #fff; }'
+' #mb_video_holder { margin:117px 0 0 142px; width:360px; height:203px; overflow:hidden; background:#fff; }'
+' #mb_social_share_links { -webkit-border-radius: 0 0 10px 10px; float:left; width:634px; height:33px; padding:5px 5px 7px 5px; background:#fff; }'
+' #mb_feedback_form p {margin:0 0 0 0;} #mb_feedback_form { display:none; -webkit-border-radius: 8px 8px 5px 5px; line-height:3.0em; float:left; width:644px; height:495px; color:#252525; overflow:hidden; background:#fff; text-align:center; font-family:Lucida Grande, Arial; }'
+' #mb_click_pop1 { position:absolute; z-index:90000; margin:0 0 0 0; overflow:hidden; height:110px; width:600px; cursor:pointer; } #mb_click_pop2 { position:absolute; z-index:90000; margin:325px 0 0 0; overflow:hidden; height:115px; width:620px; cursor:pointer; } #mb_click_pop3 { display:none; }';
//append stylesheet
var mb_ss = document.createElement('style');
mb_ss.setAttribute("type", "text/css");
if (mb_ss.textContent) { // FF
mb_ss.textContent = CSS;
}else if(mb_ss.styleSheet) {
mb_ss.styleSheet.cssText = CSS; // IE
}else{
mb_ss.innerHTML = CSS; //Chrome, Safari
}
var head = document.getElementsByTagName('head')[0];
head.appendChild(mb_ss);
},
appendCanvas : function(){
var ovaConf = "https://vast.mediabrix.com/v/ova?mbv="+mbrix.mbVars.vastID+
"&euui="+mb_payload.euui+
"&efbi="+mb_payload.myfbuserid+
"&ehos="+mb_metrics.holder.host+
"&mbcn="+mb_payload.orderName+
"&mbai="+mb_payload.adid+
"&mbci="+mb_payload.crid+
"&ecmd4="+mb_payload.product_type+
"&ecmd5="+mb_metrics.holder.uniqueID+
"&eses="+mb_metrics.holder.session+
"&mbpp="+mb_payload.siteName+
"&ecmd3=web";
ovaConf = escape(ovaConf);
var html = '<div id="mb_canvas">'
+'<div id="mb_feedback_form"><div id="mb_data_form"></div></div>'
+'<div id="mb_branded_bg">'
+'<div id="mb_click_pop1" class="clicker" onclick="mb_metrics.logEvent(\'click\',true); window.open(\''+mbrix.mbVars.clickURL+'\');"></div>'
+'<div id="mb_click_pop2" class="clicker" onclick="mb_metrics.logEvent(\'click\',true); window.open(\''+mbrix.mbVars.clickURL+'\');"></div>'
+'<div id="mb_click_pop3" class="clicker" onclick="mb_metrics.logEvent(\'click\',true); window.open(\''+mbrix.mbVars.clickURL+'\');"></div>'
+'<div id="mb_divForTimer" style="text-align:center; margin:11px 6px 0 0; float:right; width:33px; height:32px; line-height:1.8em; color:#000; font-weight:bold; font-size:0.7em; font-family:arial;"></div>'
+'<div id="mb_video_holder">'
+' <param name="allowfullscreen" value="false" />'
+' <param name="allowScriptAccess" value="always" />'
+' <param name="flashvars" value="plugins=https://mediabrix.hs.llnwd.net/o38/socialflex/jwplayer/ova.swf&config='+ovaConf+'&ord=%n&autostart='+mbrix.mbVars.autoplay+'&controlbar.position=over&mute='+mbrix.mbVars.automute+'&volume=90&provider=video" />'
+'</object>'
+'</div>'
+'</div>'
+'<div id="mb_social_share_links">'
+'<div id="mb_logo"></div>'
+'<div id="mb_feedback" onclick="mbrix.showFeedback(); return false;"></div>'
+'</div>'
+'</div>';
if(mbrix.mbType == "j"){
var t_div = mbrix.gid('socialFlexHolder');
t_div.innerHTML = html;
t_div.style.height = mbrix.getDocHeight() + "px";
t_div.style.width = "100%";
t_div.style.position = "absolute";
t_div.style.zIndex = "40000";
t_div.style.overflow = "hidden";
t_div.style.top = "0px";
t_div.style.left = "0px";
mbrix.gid('mb_canvas').className = 'jstag';
} else {
var w = document.body;
var y = document.createElement('div');
w.appendChild(y);
y = document.getElementById("mb_holder_div");
y.innerHTML = html; }
},
getDocHeight : function() {
var d = document;
return Math.max(
Math.max(d.body.scrollHeight, d.documentElement.scrollHeight),
Math.max(d.body.offsetHeight, d.documentElement.offsetHeight),
Math.max(d.body.clientHeight, d.documentElement.clientHeight)
);
},
init : function(){
mbrix.addMetrics();
if(mbrix.mbVars.pixel){
mbrix.dropPixel(mbrix.mbVars.pixel);
}
mbrix.initDebug();
if(mbrix.mbType == "i"){
mbrix.mbVars.top = 0;
}
//show debug info
if(mbrix.gid('mbrix_testing')){
mbrix.show('mbrix_testing');
}
if(typeof(socialVars) == 'undefined'){socialVars={}};
var debugStr ="UID: "+ socialVars.uid +", APPID: " +socialVars.appID;
mbrix.debug(debugStr);
mbrix.compareSocialWithDefault();
mbrix.renderAd();
if(mbrix.mbType == "j"){
mbrix.sf_start_Timer();
}
},
renderAd : function(){
if(typeof(mb_metrics)!=="undefined" &&
typeof(mb_metrics.holder) !=="undefined" &&
mb_metrics.holder.session !== null){
mbrix.appendStyles();
mbrix.appendCanvas();
mbrix.toggleShareIcons();
}else{
setTimeout(function(){
mbrix.renderAd();
},500);
}
},
// **** Start Countdown Timer **** //
sf_start_Timer : function(){
if(mbrix.time_to == ""){
mbrix.time_to = window.setInterval("mbrix.sf_countDown()", 1000);
}else{
mbrix.sf_stop_Timer();
}
},
sf_stop_Timer : function(){
if(mbrix.time_to != ""){
window.clearInterval(mbrix.time_to);
mbrix.time_to = "";
document.getElementById('mb_divForTimer').innerHTML = "";
mbrix.positionCloseBtn();
}
},
sf_countDown : function(){
document.getElementById('mb_divForTimer').innerHTML = mbrix.timer_count;
mbrix.timer_count--;
if(mbrix.timer_count == -1){
mbrix.sf_stop_Timer();
}
},
positionCloseBtn : function(){
var w = document.body;
var y = document.createElement('div');
y.setAttribute('id', 'mb_close');
y.onclick = function(){mbrix.closeSocialFlex();};
y.style.position = 'absolute';
y.style.left = '50%';
y.style.marginLeft = '282px';
y.style.display = 'block';
y.style.zIndex = '800000';
w.appendChild(y);
},
closeSocialFlex : function(){
var t_div = mbrix.gid('socialFlexHolder');
if(t_div){
t_div.style.width = '1px';
t_div.style.height = '1px';
}
//NOTE: mb_video must be removed first for IE8
mbrix.removeObj(['mb_video','mb_canvas','mb_close','mb_metrics','mb_adcall','mb_styles', 'mb_error']);
if(mbrix.gid('mbrix_testing')){
mbrix.hide('mbrix_testing');
}
//Clear socialFlexHolder of pixels and miscellany
mbrix.gid('socialFlexHolder').innerHTML = "";
//Send termination message to publisher
if(mbrix.mbVars.callback != null){
mbrix.fireCallBack(mbrix.mbVars.callback);
}
mb_metrics.logEvent("close", "video");
mb_makeUUID();
},
//Append metrics.js to the document.
addMetrics : function(){
if(typeof(socialVars) !== "undefined" && socialVars.uid){
mb_payload.myfbuserid = socialVars.uid;
}
var ad_page;
if(mbrix.mbType=="j"){
ad_page = document.getElementById('socialFlexHolder').parentNode;
}else{
ad_page = document.body;
//append socialflex.js
var flex_script = document.createElement('script');
ad_page.appendChild(flex_script);
}
var metrics_script = document.createElement('script');
metrics_script.src = "https://mediabrix.hs.llnwd.net/o38/v1_4/metrics_1.1.js?%n";
ad_page.appendChild(metrics_script);
},
//Populate missing optional values in socialVars with the corresponding var from mbVars.
compareSocialWithDefault : function(){
var options = ["autoplay","automute", "share", "youtube", "twitter", "tweet","facebook","linkedin","feedback", "top", "callback", "account", "tag", "version"];
var debugStr = "UNDEFINED SOCIALVARS:";
for (var i=0;i<options.length;i++) {
if(typeof(socialVars[options[i]]) != 'undefined'){
mbrix.mbVars[options[i]] = socialVars[options[i]];
} else {
debugStr += options[i] +" ";
}
}
mbrix.debug(debugStr);
options = ["youtube", "twitter", "tweet","facebook","linkedin"];
for (var i=0;i<options.length;i++) {
if(typeof(mbrix.mbVars[options[i]]) !== 'undefined' && mbrix.mbVars[options[i]] != ""){
mbrix.mbVars.share.push(options[i]);
}
}
},
//Toggle visibility of share buttons
toggleShareIcons : function(){
//Loop through mbVars.share and display those elements
var shares = mbrix.mbVars.share;
var icons = mbrix.gcn('mb_share_icon');
for (var i=0;i<icons.length;i++) {
mbrix.hide(icons[i].id);
}
//Hide the "share:" label if there are no shares
if(typeof(mbrix.mbVars.share[0]) === "undefined"){
mbrix.hide("mb_share_txt");
return false;
}
//Loop through mbVars.share and display those elements; reuse var i
for (var i=0;i<shares.length;i++) {
window.mbrix[shares[i]+"_share"](mbrix.gid('mb_share_'+shares[i]));
mbrix.show('mb_share_'+shares[i]);
}
},
// *** Display share icons and attach click events ***//
//Facebook buttons
facebook_share : function(button){
button.onclick = function(){
window.open('http://www.facebook.com/sharer/sharer.php?src=bm&v=4&i=1253042545&u='+mbrix.mbVars.facebook +'/','_blank','width=640,height=400, toolbar=no');
mb_metrics.logEvent('share', 'facebook');
return false;
};
},
//LinkedIn buttons
linkedin_share : function(button){
button.onclick = function(){
window.open('http://www.linkedin.com/cws/share?url='+mbrix.mbVars.linkedin+'&original_referer=&token=&isFramed=false&_ts=','_blank','width=600,height=400, toolbar=no');
mb_metrics.logEvent('share', 'linkedin');
return false;
};
},
//Tweet buttons
tweet_share : function(button){
mbrix.mbVars.tweetText = escape(mbrix.mbVars.tweetText);
button.onclick = function(){
window.open('https://twitter.com/intent/tweet?original_referer='+document.location.href+'&source=tweetbutton&text='+mbrix.mbVars.tweetText+' '+mbrix.mbVars.tweet+'/' ,'_blank','width=640,height=400, toolbar=no');
mb_metrics.logEvent('share', 'tweet');
return false;
};
},
//Twitter buttons
twitter_share : function(button){
button.onclick = function(){
window.open('https://twitter.com/'+mbrix.mbVars.twitter +'/','_blank');
mb_metrics.logEvent('share', 'twitter');
return false;
};
},
//Youtube buttons
youtube_share : function(button){
button.onclick = function(){
window.open('http://www.youtube.com/'+mbrix.mbVars.youtube +'/','_blank');
mb_metrics.logEvent('share', 'youtube');
return false;
};
},
// **** End Sharing Options **** //
//Custom callback for rewards confirmation or termination.
fireCallBack : function(callback, status){
if(callback.match("mbrix.init")){
mbrix.init();
return false;
}
if(callback.match("http")){
mb_metrics.makeXHR(callback);
return false;
}
var mb_confirm="";
if(status){mb_confirm=status}
window[callback](mb_confirm);
},
cancelFeedback : function(){
mbrix.hide('mb_feedback_form');
mbrix.show(['mb_click_pop1','mb_click_pop2', 'mb_click_pop3']);
mb_metrics.logEvent("close", "feedback");
mbrix.resumeVideo();
},
showFeedback : function(){
mbrix.renderFeedbackForm();
mbrix.show('mb_feedback_form');
mbrix.hide(['mb_click_pop1','mb_click_pop2', 'mb_click_pop3']);
mb_metrics.logEvent('panelview', 'feedback');
},
renderFeedbackForm : function(){
var mb_form_html ="<form action='
http://www.mediabrix.com/ads/feedback/feedback_process_1_4.php' id='mb_ad_fb' target='mb_form_iframe' method='post' onsubmit='mbrix.delayCancelFeedback();'><p class='form_p'>Please tell us about this ad:<br><select name='mb_feedback_reason' id='mb_form'><option value='Uninteresting'>Uninteresting</option><option value='Misleading'>Misleading</option><option value='Sexually Explicit'>Sexually Explicit</option><option value='Against my views'>Against my views</option><option value='Offensive'>Offensive</option><option value='Repetitive'>Repetitive</option><option value='Other'>Other</option></select></p><p class='form_p'><label for='mb_feedback_comments' class='mb_form_subtitle'>Ad Feedback</label><br><textarea name='mb_feedback_comments' rows='5' cols='35' id='commt' style='resize: none;'></textarea></p><p class='form_p'><label for='mb_email'>Email Address:</label> <input type='text' name='mb_email' value='' /></p><p class='form_p'><input type='submit' name='submit' value='submit'><input type='button' name='close' value='close' onclick='mbrix.cancelFeedback(); return false;'><input type='hidden' name='mb_form_id' value='30'><input type='hidden' name='mb_form_type' value='data'></p><input type='hidden' name='mb_referrer_url' id='mb_referrer_url' value=''><input type='hidden' name='mb_order_id' id='mb_order_id' value=''><input type='hidden' name='mb_order_name' id='mb_order_name' value=''><input type='hidden' name='mb_creative_id' id='mb_creative_id' value=''><input type='hidden' name='mb_ad_id' id='mb_ad_id' value=''><input type='hidden' name='mb_sitename' id='mb_sitename' value=''><input type='hidden' name='mb_product_type' id='mb_product_type' value=''><input type='hidden' name='mb_browser_version' id='mb_browser_version' value=''><input type='hidden' name='mb_user_agent' id='mb_user_agent' value=''><input type='hidden' name='mb_browser_name' id='mb_browser_name' value=''><input type='hidden' name='mb_referrer_title' id='mb_referrer_title' value=''><input type='hidden' name='mb_platform' id='mb_platform' value=''></form><iframe name='mb_form_iframe' style='height:50px;' frameborder='0'></iframe>";
document.getElementById('mb_feedback_form').innerHTML = mb_form_html;
document.getElementById('mb_referrer_title').value=document.title;
document.getElementById('mb_referrer_url').value=document.location.href;
document.getElementById('mb_browser_name').value=navigator.appName;
document.getElementById('mb_browser_version').value=navigator.appVersion;
document.getElementById('mb_user_agent').value=navigator.userAgent;
document.getElementById('mb_platform').value=navigator.platform;
if(mb_payload){
document.getElementById('mb_order_id').value=mb_payload.euui;
document.getElementById('mb_order_name').value=mb_payload.orderName;
document.getElementById('mb_creative_id').value=mb_payload.crid;
document.getElementById('mb_product_type').value=mb_payload.product_type;
document.getElementById('mb_ad_id').value=mb_payload.adid;
document.getElementById('mb_sitename').value=mb_payload.siteName;
}
},
delayCancelFeedback : function(){
setTimeout("mbrix.cancelFeedback()",4000);
},
initDebug : function(){
if(mbrix.gid('mbrix_testing')){
mbrix.show('mbrix_testing');
mbrix.gid('mbrix_debug').innerHTML="";
}
},
ord : function(){
var n=Math.random()*10000000000000000;
return n;
},
dropPixel : function(pixel){
var img = document.createElement('IMG');
img.src=pixel +"?"+mbrix.ord();
img.style.height = "1px";
img.style.width = "1px";
img.className = "mb_pixel";
var ad_page;
if(mbrix.mbType=="j"){
ad_page = mbrix.gid('socialFlexHolder');
}else{
ad_page = document.body;
}
ad_page.appendChild(img);
},
//*** Utility Functions ****//
debug : function(err){
if(window.console && window.console.log && typeof(mbrix.mbVars.debug) === "undefined"){
console.log("[MBRIX] ", err);
}
debug_div = mbrix.gid("mbrix_debug");
if(debug_div){
debug_div.innerHTML = err;
}
},
reportError : function(err){
var errTxt = "http://www.mediabrix.com/ads/feedback/error_processor.php?errormsg="+err+
"&mb_order_id="+mb_payload.euui+
"&mb_order_name="+mb_payload.orderName+
"&mb_ad_id="+mb_payload.adid+
"&mb_creative_id="+mb_payload.crid+
"&mb_product_type="+mb_payload.product_type+
"&mb_sitename="+mb_payload.siteName+
"&mb_referrer_url="+document.location.href+
"&mb_browser_version="+navigator.appVersion+
"&mb_user_agent="+navigator.userAgent+
"&mb_browser_name="+navigator.appName+
"&mb_referrer_title="+document.title+
"&mb_platform="+navigator.platform+
"&uid="+socialVars.uid+
"&adVerification="+socialVars.adVerification+
"&adDisplayed="+socialVars.adDisplayed+
"&rewardConfirmation="+socialVars.rewardConfirmation+
"&adClosed="+socialVars.adClosed+
"&callback="+socialVars.callback+
"&appID="+socialVars.appID;
if(mbrix.gid("mb_error")){
mbrix.gid("mb_error").src=errTxt;
}else{
var errFrame = document.createElement("IFRAME");
errFrame.src=errTxt;
errFrame.style.display = "none";
document.body.appendChild(errFrame);
}
},
hide : function(id){
mbrix.toggle(id,"none");
},
show : function(id){
mbrix.toggle(id,"block");
},
toggle : function(id, action){
if(typeof(id) != "string"){
for (var i=0;i<id.length;i++) {
mbrix.gid(id[i]).style.display = action;
}
}else{
mbrix.gid(id).style.display = action;
}
},
removeObj : function(id){
var obj;
if(typeof(id) != "string"){
for (var i=0;i<id.length;i++) {
obj = mbrix.gid(id[i]);
if(obj){obj.parentNode.removeChild(obj);}
};
}else{
obj = mbrix.gid(id);
if(obj){obj.parentNode.removeChild(obj);}
}
},
gid : function(id){
return document.getElementById(id);
},
/*
Custom getElementsByClassName method to support IE8-
*/
gcn : function (className, tag, elm){
if (document.gcn) {
gcn = function (className, tag, elm) {
elm = elm || document;
var elements = elm.gcn(className),
nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
returnElements = [],
current;
for(var i=0, il=elements.length; i<il; i+=1){
current = elements[i];
if(!nodeName || nodeName.test(current.nodeName)) {
returnElements.push(current);
}
}
return returnElements;
};
}
else if (document.evaluate) {
gcn = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = "",
namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
returnElements = [],
elements,
node;
for(var j=0, jl=classes.length; j<jl; j+=1){
classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
}
try {
elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
}
catch (e) {
elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
}
while ((node = elements.iterateNext())) {
returnElements.push(node);
}
return returnElements;
};
}
else {
gcn = function (className, tag, elm) {
tag = tag || "*";
elm = elm || document;
var classes = className.split(" "),
classesToCheck = [],
elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
current,
returnElements = [],
match;
for(var k=0, kl=classes.length; k<kl; k+=1){
classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
}
for(var l=0, ll=elements.length; l<ll; l+=1){
current = elements[l];
match = false;
for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
match = classesToCheck[m].test(current.className);
if (!match) {
break;
}
}
if (match) {
returnElements.push(current);
}
}
return returnElements;
};
}
return gcn(className, tag, elm);
}
/**** Ends gcn ****/
};
mbrix.init();//Initialize SocialFlex
//*** Video Player methods ***//
var currentState = 'NONE';
var player = null;
function playerReady(thePlayer) {
player = window.document[thePlayer.id];
addListeners();
}
function addListeners() {
if (player) {
player.addModelListener("STATE", "stateListener");
} else {
setTimeout("addListeners()",100);
}
}
function stateListener(obj) { //IDLE, BUFFERING, PLAYING, PAUSED, COMPLETED
currentState = obj.newstate;
previousState = obj.oldstate;
var sf_div = document.getElementById('socialFlexHolder');
if( currentState == 'PLAYING' ){
//Placeholder for custom code
}else if( currentState == 'COMPLETED'){
//Placeholder for custom code
}
}
</script>