<!-- Template ID = 18419 Template Name = MediaBrix SocialFlex 1.4 VAST/VPAID [JAVASCRIPT] -->
<script type="text/javascript">
var mb_type = "%eenv!";
var mb_payload = {
"euui" : "%ebuy!", //populated from mediabrix metrics server
"myfbuserid" : null, // From publisher
"orderName" : "Sandro's awesome test order", //manually entered in DFP
"adid" : "%eaid!", //ad id from DFP macro "crid" : "%ecid!", //creative id from DFP macro "siteName" : "%s", //site name from DFP
"zoneName" : "mediabrix", //manually entered in DFP template as zone.
"session" : null,
"product_type" : "socialFlex"
}
function addMetrics(){
var ad_page;
if(mb_type=="j"){
ad_page = parent.document.getElementById('socialFlexHolder').parentNode;
}else{
ad_page = document.body;
}
var metrics_script = document.createElement('script');
ad_page.appendChild(metrics_script);
}
//Populate missing optional values in socialVars with the corresponding var from mbDefaults.
function compareSocialWithDefault(){
var options = ["confirmText","autoplay","automute","iconURL","backgroundURL","share", "youtube", "twitter", "tweet","facebook","linkedin","feedback", "data_capture"];
for (var i=0;i<options.length;i++) {
if(typeof(socialVars[options[i]]) === 'undefined'){
socialVars[options[i]] = mbDefaults[options[i]];
}
}
}
// **** start feedback engine **** //
function mb_feedback_message(){
var mb_message = "<h3>Thank you for your feedback</h3>";
document.getElementById('mb_feedback_form').innerHTML = mb_message;
document.getElementById('mb_feedback_form').style.textAlign = "center";
document.getElementById('mb_feedback_form').style.top = "210px";
setTimeout('mb_kill_message()', 1500);
}
// ** Fetch forms from limelight ** //
function mb_fetch_form(form_id){
var new_script = document.createElement('script');
document.body.appendChild(new_script);
}
function mb_kill_message(){
document.getElementById('mb_feedback_form').style.display = "none";
}
function mb_cancel_feedback(){
document.getElementById('mb_feedback_form').style.display = "none";
document.getElementById('mb_click_pop1').style.display = "block";
document.getElementById('mb_click_pop2').style.display = "block";
document.getElementById('mb_click_pop3').style.display = "block";
}
function mb_show_feedback(form_id){
mb_fetch_form(form_id);
document.getElementById('mb_feedback_form').style.display = "block";
document.getElementById('mb_click_pop1').style.display = "none";
document.getElementById('mb_click_pop2').style.display = "none";
document.getElementById('mb_click_pop3').style.display = "none";
}
function mb_show_data_cap(){
if(mb_vars.dc){mb_fetch_form(mb_vars.dc);}
document.getElementById('mb_data_cap').style.display = "block";
}
function mb_submit_data_cap(){
document.getElementById('mb_data_cap').style.display = "none";
}
// **** end feedback engine **** //
// **** Start Sharing Options **** //
// ** Sharing data
var mbDefaults ={
"youtube" : "mediabrix", "twitter" : "mediabrix",
"tweet" : "mediabrix",
"facebook" : "mediabrix", "linkedin" : "mediabrix", "feedback" : 27, "data_capture" : 27,
"share" : [],"autoplay" : "true","automute" : "false"
}
var options = ["youtube", "twitter", "tweet","facebook","linkedin"];
for (var i=0;i<options.length;i++) {
if(typeof(mbDefaults[options[i]]) !== 'undefined' && mbDefaults[options[i]] != ""){
mbDefaults.share.push(options[i]);
}
}
//Toggle visibility of share buttons
function toggleShareIcons(){
//Loop through socialVars.share and display those elements
if(typeof(socialVars.share) != 'undefined'){
shares = socialVars.share;
}else if(typeof(socialVars.share) != 'undefined'){
shares = socialVars.share;
}
//Hide all share icons unless shares = all
if(shares === "all"){return false;}
var icons = document.getElementsByClassName('mb_share_icon');
for (var i=0;i<icons.length;i++) {
icons[i].style.display = "none"; }
//Loop through socialVars.share and display those elements; reuse var i
for (var i=0;i<shares.length;i++) {
//window["mb_"+shares[i]+"_share"](document.getElementById('mb_confirm_'+shares[i]));
window["mb_"+shares[i]+"_share"](document.getElementById('mb_share_'+shares[i]));
}
}
// *** Display share icons and attach click events ***// //Facebook buttons
function mb_facebook_share(button){
button.onclick = function(){
window.open('http://www.facebook.com/sharer/sharer.php?u='+socialVars.facebook +'/','_blank','width=640,height=400, toolbar=no');
mb_metrics.logEvent('share', 'facebook');
return false;
};
button.style.display = "block";
}
//LinkedIn buttons
function mb_linkedin_share(button){
button.onclick = function(){ window.open('http://www.linkedin.com/cws/share?url='+socialVars.linkedin+'&original_referer=&token=&isFramed=false&_ts=','_blank','width=600,height=400, toolbar=no');
mb_metrics.logEvent('share', 'linkedin');
return false;
};
button.style.display = "block";
}
//Tweet buttons
function mb_tweet_share(button){
button.onclick = function(){ window.open('https://twitter.com/intent/tweet?original_referer='+document.location.href+'&source=tweetbutton&text=&url='+socialVars.tweet+'/' ,'_blank','width=640,height=400, toolbar=no');
mb_metrics.logEvent('share', 'tweet');
return false;
};
button.style.display = "block";
}
//Twitter buttons
function mb_twitter_share(button){
button.onclick = function(){
window.open('https://twitter.com/'+socialVars.twitter +'/','_blank');
mb_metrics.logEvent('share', 'twitter');
return false;
};
button.style.display = "block";
}
//Youtube buttons
function mb_youtube_share(button){
button.onclick = function(){
window.open('http://www.youtube.com/user/'+socialVars.youtube +'/','_blank');
mb_metrics.logEvent('share', 'youtube');
return false;
};
button.style.display = "block";
}
// **** End Sharing Options **** //
// **** Start Countdown Timer **** //
var time_to = "";
var timer_count = 5;
function sf_start_Timer(){
if(mb_type == "i")return false;
if(time_to == ""){
time_to = window.setInterval("sf_countDown()", 1000);
}else{
sf_stop_Timer();
}
}
function sf_stop_Timer(){
if(time_to != ""){
window.clearInterval(time_to);
time_to = "";
document.getElementById('mb_divForTimer').innerHTML = "";
document.getElementById('mb_close').style.display = "block";
}
}
function sf_countDown(){
document.getElementById('mb_divForTimer').innerHTML = timer_count;
timer_count--;
if(timer_count == -1){
sf_stop_Timer();
}
}
// **** End Countdown Timer **** //
//Apply publisher settings to the unit
function initSocialVars(){
if(typeof(socialVars) == 'undefined'){socialVars={}};
//Compare socialVars with mbDefaults.
compareSocialWithDefault();
attachSocialFlex();
//Toggle Share buttons
toggleShareIcons(); }
// **** Start Removal of SocialFlex Instance **** //
function closeSocialFlex(){
var t_div = document.getElementById('socialFlexHolder');
var d_div = document.getElementById('mb_canvas');
t_div.style.width = '1px';
t_div.style.height = '1px';
t_div.removeChild(d_div);
//Send termination message to publisher if(typeof(socialVars.callback) != 'undefined') fireCallBack();
}
// **** End Removal of SocialFlex Instance **** //
function attachSocialFlex(){
strVar =
' <style type="text/css">\n\n\n#socialFlexHolder { '
+ 'position:absolute: z-index:400000; width:100%; overflow:'
+ 'hidden; left:0px; top:0px; }\n#mb_canvas { font-family:Lu'
+ 'cida Grande, Arial; overflow:hidden; width:644px; height'
+ ':494px; border:3px solid #8e2323; margin:0 auto'
+ '; margin-top:137px; border-radius:10px; -moz-border-radi'
+ 'us: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; }\n#mb_branded_bg { float:left; '
+ 'width:644px; height:449px; overflow:hidden; background:u'
+ 'b_close { margin:3px 3px 0 0; display:none; float:right;'
+ 'g\'); cursor:pointer; }\n#mb_video_holder { margin:182px 0 0 242px; width:360px; height:203px; overflow:hi'
+ 'dden; background:#fff; }\n\n#mb_social_share_links { float'
+ ':left; width:634px; padding:5px; overflow:hidden; backgr'
+ 'ound:#fff; }\n#mb_logo { overflow:hidden; float:left; mar'
+ 'gin:0 80px 0 0; width:100px; height:36px; background:url'
+ 'hare/mb_logo.png\'); }\n.mb_share_icon { float:left; heigh'
+ 't:36px; padding:0 8px 0 8px; margin:0 0 0 0; cursor:poin'
+ 'ter; }\n#mb_feedback { overflow:hidden; float:right; widt'
+ 'h:75px; height:19px; cursor:pointer; background:url(\'htt'
+ 'feedback.png\'); }\n\n#mb_feedback_form { display:none; lin'
+ 'e-height:3.0em; float:left; width:644px; height:494px; c'
+ 'olor:#252525; overflow:hidden; background:#fff; text-ali'
+ 'gn:center; font-family:Lucida Grande, Arial; }\n\n\n</style'
+ '>\n<div id="mb_canvas">\n \n\n <div id="mb_feedback_fo'
+ 'rm">\n \n <div id="mb_data_form"></div>\n \n\n </div>\n \n <'
+ 'div id="mb_branded_bg">\n \n <div id="mb_click_pop1" clas'
+ 's="clicker" onclick="window.open(\'%c%u\');"><img src="
http://www.google.com" border="0" width="1" height="1" /></div>\n <div id="mb_click_pop2" class='
+ '"clicker" onclick="window.open(\'%c%u\');"></div>\n \n <di'
+ 'v id="mb_click_pop3" class="clicker" onclick="window.ope'
+ 'n(\'%c%u\');"></div>\n\n \n <div id="mb_close" onclick="clo'
+ 'seSocialFlex(); mb_metrics.logEvent(\'close\', true);"></d'
+ 'iv>\n\n <div id="mb_divForTimer" style="margin:9px 3px 0 '
+ '0; float:right; width:33px; height:32px; line-height:1.8'
+ 'em; color:#000; font-weight:bold; font-size:0.7em; font-'
+ 'family:arial;"></div>\n \n <div id="mb_video_holder">\n '
+ ' <object type="application/x-shockwave-flash" data="http'
+ '.swf" width="360" height="203">'
+ ' name="allowfullscreen" value="true" />\n <param name='
+ '"allowscriptaccess" value="always" />\n <param name="f'
+ '38/socialflex/jwplayer/ova.swf&config=http://mediabrix.vo.llnwd.net/o38/brands/test/sandro/config_vast_redirect_psf.xml&aut'
+ 'ostart="+socialVars.autoplay+"&controlbar.position=over&mute="+socialVars.automute+"&provider='
+ 'video" />\n </object>\n </div>\n\n </div>\n\n \n <div id="mb'
+ '_social_share_links">\n \n <div id="mb_logo"></div>\n \n '
+ '<div id="mb_share_txt" style="overflow:hidden; float:lef'
+ 't; width:43px; height:36px; background:url(\'
https://medi'
+ '\')"></div>\n \n <div class="mb_share_icon" id="mb_share_'
+ '38/socialflex/images/share/facebook.png" border="0" alt='
+ '"like us facebook" />\n </div>\n \n <div class="mb_share'
+ 'png" border="0" alt="like us facebook" />\n </div>\n\n \n '
+ ' <div class="mb_share_icon" id="mb_share_tweet">\n <img'
+ 'es/share/tweet.png" border="0" alt="Tweet!" />\n </div>\n'
+ '\n <div class="mb_share_icon" id="mb_share_twitter">\n '
+ 'images/share/twitter.png" border="0" alt="Follow us on T'
+ 'witter" />\n </div>\n\n <div class="mb_share_icon" id="mb'
+ '.net/o38/socialflex/images/share/youtube.png" border="0"'
+ ' alt="Follow us on YouTube" />\n\n </div>\n\n <div id="mb_'
+ 'feedback" onclick="mb_show_feedback(\'27\'); return false;"></div>\n \n </div>\n\n \n\n</div>';
// end_var_declaration
if(mb_type == "j"){
document.getElementById('socialFlexHolder').innerHTML = strVar;
document.getElementbyId('mb_canvas').className = 'jstag';
} else {
document.write(strVar);
}
}
initSocialVars();
addMetrics();
sf_start_Timer();
</script>