iran.js

var creative = {};

/**
 * Window onload handler.
 */
function preInit() {
  setupDom();

  if (Enabler.isInitialized()) {
    init();
  } else {
    Enabler.addEventListener(
      studio.events.StudioEvent.INIT,
      init
    );
  }
}

/**
 * setupDom selects all elements and sets up all large animation timelines
 * prior to the ad initialization. This ensures that everything is ready before
 * the ad plays.
 */
function setupDom() {

  creative.dom = {};
  creative.dom.mainContainer = document.getElementById('main-container');
  creative.dom.exit = document.getElementById('exit');
  creative.dom.startNowButton = $('.start-now-small');
  creative.dom.feature = $('.feature');
  creative.dom.footer = $('.footer');
  creative.dom.panelOne = {};
  creative.dom.panelOne.wrapper = $('.panel-1');
  creative.dom.panelOne.businessText = $('.business-text');
  creative.dom.panelOne.rollOverText = $('.roll-over-text');

  creative.dom.startNowPanel = $('.start-now-panel');
  creative.dom.startNowButtonShimmer = $('.icon-effect');

  creative.dom.previewButton = $('.start-now-button .see-your-gmail');
  creative.dom.previewShimmer = $('.icon-effect');

  //Business Caret carousel elements
  // These will be given event listeners that show the corresponding panel on click
    creative.dom.carets = {};
    creative.dom.carets.birch = $('.show-birch-caret');
    creative.dom.carets.gizmo = $('.show-gizmo-caret');
    creative.dom.carets.von = $('.show-von-caret');
    creative.dom.carets.emailGenerator = $('.show-start-now-caret');

  //Cursor blink handlers
  //Unfortunately inidividual cursor timelines cannot be DRY-ed up, as they are
  // used as Timeine callbacks, which can't accept variables
  creative.dom.cursorIntervals = {};
  function birchRepeatCursorBlink(){
    creative.dom.cursorIntervals.birch = setTimeout(function(){
      creative.birchCursorTimeline.restart();
    },300)
  }
  function gizmoRepeatCursorBlink(){
    creative.dom.cursorIntervals.gizmo = setTimeout(function(){
      creative.gizmoCursorTimeline.restart();
    },300)
  }
  function vonRepeatCursorBlink(){
    creative.dom.cursorIntervals.von = setTimeout(function(){
      creative.vonCursorTimeline.restart();
    },300)
  }
  //The stop blink handler is DRY, as it isn't a timeline callback and the specifc cursor context
  // can be passed in as a string
  creative.stopCursorBlink = function(panel){
    creative[panel+"CursorTimeline"].pause();
    clearInterval(creative.dom.cursorIntervals[panel]);
  }
  //Birch Panel
  creative.dom.birchPanel = $('.birch-panel');
  creative.dom.birchCursor = $('.birch-panel .email-address-shadow .left div.cursor');
  creative.dom.birchEmail = {};
  creative.dom.birchEmail.left = $('.birch-panel .email-address-shadow .left');
  creative.dom.birchEmail.right = $('.birch-panel .email-address-shadow .right');
  creative.dom.birchEmail.letterone = $('.birch-panel .email-letter-1');
  creative.dom.birchEmail.lettertwo = $('.birch-panel .email-letter-2');
  creative.dom.birchEmail.letterthree = $('.birch-panel .email-letter-3');
  creative.dom.birchEmail.at = $('.birch-panel .email-at-sign');
  creative.dom.birchEmail.dot = $('.birch-panel .email-dot');
  creative.dom.birchEmail.c = $('.birch-panel .email-c');
  creative.dom.birchEmail.o = $('.birch-panel .email-o');
  creative.dom.birchEmail.m = $('.birch-panel .email-m');

  //Birch Typing Animations
  creative.birchCursorTimeline = new TimelineLite({onComplete:birchRepeatCursorBlink});
  creative.birchCursorTimeline
    .to( creative.dom.birchCursor, 0.2, {autoAlpha: 0})
    .to( creative.dom.birchCursor, 0.15, {autoAlpha: 1})
    //start the timeline in a paused state
    .restart().pause();


  creative.dom.birchTimeline = new TimelineLite({});
    creative.dom.birchTimeline
    .addLabel('letterone')
    .to( creative.dom.birchEmail.letterone, 0.2, {autoAlpha:1}, 'letterone' )
    .set( creative.dom.birchCursor, {left: 0}, 'letterone')
    .addLabel('lettertwo')
    .to( creative.dom.birchEmail.lettertwo, 0.1, {autoAlpha:1}, 'lettertwo' )
    .set( creative.dom.birchCursor, {left: 14}, 'lettertwo')
    .addLabel('letterthree')
    .to( creative.dom.birchEmail.letterthree, 0.1, {autoAlpha:1}, 'letterthree' )
    .set( creative.dom.birchCursor, {left: 29}, 'letterthree')
    .addLabel('at')
    .to( creative.dom.birchEmail.at, 0.1, {autoAlpha:1}, 'at' )
    .set( creative.dom.birchCursor, {left: 56}, 'at')
    .addLabel('dot')
    .to( creative.dom.birchEmail.dot, 0.1, {autoAlpha:1,delay:0.5}, 'dot' )
    .set( creative.dom.birchCursor, {left: 189,delay:0.5}, 'dot')
    .addLabel('c')
    .to( creative.dom.birchEmail.c, 0.1, {autoAlpha:1}, 'c')
    .set( creative.dom.birchCursor, {left: 202}, 'c')
    .addLabel('o')
    .to( creative.dom.birchEmail.o, 0.1, {autoAlpha:1}, 'o')
    .set( creative.dom.birchCursor, {left: 222}, 'o')
    .addLabel('m')
    .to( creative.dom.birchEmail.m, 0.2, {autoAlpha:1}, 'm')
    .set( creative.dom.birchCursor, {left: 236}, 'm')
    //start the timeline in a paused state
    .restart().pause()


    //Gizmo Panel
    creative.dom.gizmoPanel = $('.gizmo-panel');
    creative.dom.gizmoCursor = $('.gizmo-panel .email-address-shadow .left div.cursor');
    creative.dom.gizmoEmail = {};
    creative.dom.gizmoEmail.left = $('.gizmo-panel .email-address-shadow .left');
    creative.dom.gizmoEmail.right = $('.gizmo-panel .email-address-shadow .right');
    creative.dom.gizmoEmail.letterone = $('.gizmo-panel .email-letter-1');
    creative.dom.gizmoEmail.lettertwo = $('.gizmo-panel .email-letter-2');
    creative.dom.gizmoEmail.letterthree = $('.gizmo-panel .email-letter-3');
    creative.dom.gizmoEmail.letterfour = $('.gizmo-panel .email-letter-4');
    creative.dom.gizmoEmail.at = $('.gizmo-panel .email-at-sign');
    creative.dom.gizmoEmail.dot = $('.gizmo-panel .email-dot');
    creative.dom.gizmoEmail.c = $('.gizmo-panel .email-c');
    creative.dom.gizmoEmail.o = $('.gizmo-panel .email-o');
    creative.dom.gizmoEmail.m = $('.gizmo-panel .email-m');

    //gizmo Typing Animations
    creative.gizmoCursorTimeline = new TimelineLite({onComplete:gizmoRepeatCursorBlink});
    creative.gizmoCursorTimeline
      .to( creative.dom.gizmoCursor, 0.2, {autoAlpha: 0})
      .to( creative.dom.gizmoCursor, 0.15, {autoAlpha: 1})
      //start the timeline in a paused state
      .restart().pause();

    creative.dom.gizmoTimeline = new TimelineLite({});
      creative.dom.gizmoTimeline
      .addLabel('letterone')
      .to( creative.dom.gizmoEmail.letterone, 0.2, {autoAlpha:1}, 'letterone' )
      .set( creative.dom.gizmoCursor, {left: 17}, 'letterone')
      .addLabel('lettertwo')
      .to( creative.dom.gizmoEmail.lettertwo, 0.1, {autoAlpha:1}, 'lettertwo' )
      .set( creative.dom.gizmoCursor, {left: 30}, 'lettertwo')
      .addLabel('letterthree')
      .to( creative.dom.gizmoEmail.letterthree, 0.1, {autoAlpha:1}, 'letterthree' )
      .set( creative.dom.gizmoCursor, {left: 41}, 'letterthree')
      .addLabel('letterfour')
      .to( creative.dom.gizmoEmail.letterfour, 0.1, {autoAlpha:1}, 'letterfour' )
      .set( creative.dom.gizmoCursor, {left: 56}, 'letterfour')
      .addLabel('at')
      .to( creative.dom.gizmoEmail.at, 0.1, {autoAlpha:1}, 'at' )
      .set( creative.dom.gizmoCursor, {left: 77}, 'at')
      .addLabel('dot')
      .to( creative.dom.gizmoEmail.dot, 0.1, {autoAlpha:1,delay:0.5}, 'dot' )
      .set( creative.dom.gizmoCursor, {left: 187,delay:0.5}, 'dot')
      .addLabel('c')
      .to( creative.dom.gizmoEmail.c, 0.1, {autoAlpha:1}, 'c')
      .set( creative.dom.gizmoCursor, {left: 200}, 'c')
      .addLabel('o')
      .to( creative.dom.gizmoEmail.o, 0.1, {autoAlpha:1}, 'o')
      .set( creative.dom.gizmoCursor, {left: 220}, 'o')
      .addLabel('m')
      .to( creative.dom.gizmoEmail.m, 0.2, {autoAlpha:1}, 'm')
      .set( creative.dom.gizmoCursor, {left: 241}, 'm')
      .restart().pause()

      //von Panel
      creative.dom.vonPanel = $('.von-panel');
      creative.dom.vonCursor = $('.von-panel .email-address-shadow .left div.cursor');
      creative.dom.vonEmail = {};
      creative.dom.vonEmail.left = $('.von-panel .email-address-shadow .left');
      creative.dom.vonEmail.right = $('.von-panel .email-address-shadow .right');
      creative.dom.vonEmail.letterone = $('.von-panel .email-letter-1');
      creative.dom.vonEmail.lettertwo = $('.von-panel .email-letter-2');
      creative.dom.vonEmail.letterthree = $('.von-panel .email-letter-3');
      creative.dom.vonEmail.at = $('.von-panel .email-at-sign');
      creative.dom.vonEmail.dot = $('.von-panel .email-dot');
      creative.dom.vonEmail.c = $('.von-panel .email-c');
      creative.dom.vonEmail.o = $('.von-panel .email-o');
      creative.dom.vonEmail.m = $('.von-panel .email-m');

      //Von Typing Animations
      creative.vonCursorTimeline = new TimelineLite({onComplete:vonRepeatCursorBlink});
      creative.vonCursorTimeline
        .to( creative.dom.vonCursor, 0.2, {autoAlpha: 0})
        .to( creative.dom.vonCursor, 0.15, {autoAlpha: 1})
        //start the timeline in a paused state
        .restart().pause();

        creative.dom.vonTimeline = new TimelineLite({});
          creative.dom.vonTimeline
          .addLabel('letterone')
          .to( creative.dom.vonEmail.letterone, 0.2, {autoAlpha:1}, 'letterone' )
          .set( creative.dom.vonCursor, {left: 3}, 'letterone')
          .addLabel('lettertwo')
          .to( creative.dom.vonEmail.lettertwo, 0.1, {autoAlpha:1}, 'lettertwo' )
          .set( creative.dom.vonCursor, {left: 8}, 'lettertwo')
          .addLabel('letterthree')
          .to( creative.dom.vonEmail.letterthree, 0.1, {autoAlpha:1}, 'letterthree' )
          .set( creative.dom.vonCursor, {left: 31}, 'letterthree')
          .addLabel('at')
          .to( creative.dom.vonEmail.at, 0.1, {autoAlpha:1}, 'at' )
          .set( creative.dom.vonCursor, {left: 58}, 'at')
          .addLabel('dot')
          .to( creative.dom.vonEmail.dot, 0.1, {autoAlpha:1,delay:0.5}, 'dot' )
          .set( creative.dom.vonCursor, {left: 197,delay:0.5}, 'dot')
          .addLabel('c')
          .to( creative.dom.vonEmail.c, 0.1, {autoAlpha:1}, 'c')
          .set( creative.dom.vonCursor, {left: 210}, 'c')
          .addLabel('o')
          .to( creative.dom.vonEmail.o, 0.1, {autoAlpha:1}, 'o')
          .set( creative.dom.vonCursor, {left: 225}, 'o')
          .addLabel('m')
          .to( creative.dom.vonEmail.m, 0.2, {autoAlpha:1}, 'm')
          .set( creative.dom.vonCursor, {left: 253}, 'm')
          .restart().pause()

          // Email generator panel
          creative.dom.emailGeneratorPanel = $('.email-generator-panel');
          creative.dom.emailInputs = $('.email-inputs');
          creative.dom.findText = $('.email-generator-panel .gmail-for-work-block h3');



          // Filter out bad words:




} // End setupDom()

/**
 * Functionality Controllers
 */
 //Timeouts for autoadvancing carousel
 creative.panelOneTimeout = {};
 creative.birchTimeout = {};
 creative.gizmoTimeout = {};
 creative.vonTimeout = {};
 creative.birchAnimatedBoolean = false;
 creative.timeoutWaitTime = 4000;

 function setPanelTimeout(panel){
   var nextPanel;
   switch (panel) {
       case 'birch':
         nextPanel = 'gizmo';
         break;
       case 'gizmo':
         nextPanel = 'von';
         break;
       case 'von':
         nextPanel = 'emailGenerator';
         break;
     default:
       return false;
   }
   creative[panel+"Timeout"] = setTimeout(function(){
     animatePanel(nextPanel);
     if (panel == 'von') {
       finalPanelActions();
     }
   }, creative.timeoutWaitTime);
 }

 function clearTimeouts(){
   clearTimeout(creative.panelOneTimeout);
   clearTimeout(creative.birchTimeout);
   clearTimeout(creative.gizmoTimeout);
   clearTimeout(creative.vonTimeout);
 }

function animatePanelOne(){
  creative.panelOneTimeline = new TimelineLite({});
  creative.panelOneTimeline
    .to(creative.dom.panelOne.businessText, 0.3, { left:0, opacity:1,delay:1} )
    .to( creative.dom.panelOne.rollOverText,  0.3, { left:0, opacity:1,delay:0.5} )
    .to( creative.dom.panelOne.rollOverText,  0.3, { scale:1.1, delay:0.7} )
    .to( creative.dom.panelOne.rollOverText,  0.3, { scale:1 ,delay:1} )
  creative.panelOneTimeout = setTimeout(function(){
    animatePanel('birch');
    creative.birchAnimatedBoolean = true;
  },4000)
}



function hidePanels(){
  TweenLite.to(creative.dom.panelOne.wrapper, 0.2,{opacity:0,zIndex:-1});
  TweenLite.to(creative.dom.birchPanel, 0.2,{opacity:0, zIndex:-1});
  TweenLite.to(creative.dom.gizmoPanel, 0.2,{opacity:0, zIndex:-1});
  TweenLite.to(creative.dom.vonPanel, 0.2,{opacity:0, zIndex:-1});
  TweenLite.to(creative.dom.emailGeneratorPanel, 0.2,{opacity:0, zIndex:-1});
  TweenLite.to(creative.dom.startNowPanel, 0.2,{opacity:0, zIndex:-1});
}

function animatePanel(panel){
  hidePanels();

  //Show biz panel
  TweenLite.to(creative.dom[panel+"Panel"], 0.2,{opacity:1, zIndex:1});
  TweenLite.to(creative.dom.startNowButton, 0.2,{opacity:1});
  TweenLite.set(creative.dom.footer, {autoAlpha:1});
  //Start this panel's cursor and typing animations
  if(creative[panel+"CursorTimeline"]){
    creative[panel+"CursorTimeline"].restart();
    creative.dom[panel+"Timeline"].restart();
  }

  clearTimeouts();
  setPanelTimeout(panel);
  if (panel="emailGenerator") {
    $('.number-one').addClass('active');
    $('#name').focus();
  }
  if(panel == "startNow") {
      TweenLite.to(creative.dom.footer, 0.3, {autoAlpha:0, delay:0.1});
      TweenLite.set(creative.dom.startNowButtonShimmer, {className: "+=shimmer",delay:1})
      TweenLite.to(creative.dom.startNowButtonShimmer,0.6, {autoAlpha:0,delay:1.1})
  }
}


/**
 * Adds appropriate listeners at initialization time
 * This section contains event listeners for the whole banner, split up by section
 * Listeners include all events bound to hovers and clicks
 */
function addListeners() {
  //These are the exit events, attached to the 'Start now' and 'See more' buttons
  creative.dom.exit.addEventListener('click', exitClickHandler);
  $('.exit')[0].addEventListener('click', exitClickHandler);

  //input focus events
  $('#name').focus(function(){
    $('.number-one').addClass('active');
    // setTimeout(function(){
    //   var val = $('#name').val();
    //   if(val.substring(0,1) != " "){
    //     $('#name').val(" " + val) ;
    //   }
    // },500)
  });
  $('#name').focusout(function(){
    $('.number-one').removeClass('active');

  });
  $('#domain').focus(function(){
    $('.number-two').addClass('active');
    // setTimeout(function(){
    //   var val = $('#domain').val();
    //   if(val.substring(0,1) != " "){
    //     $('#domain').val(" " + val) ;
    //   }
    // },500)
  });
  $('#domain').focusout(function(){
    $('.number-two').removeClass('active');
  });
}

function slugify(text)
{
 return text.toString().toLowerCase()
 .replace(/\s+/g, '') // remove spaces
 .replace(/[^\w\-]+/g, '') // Remove all non-word chars
 .replace(/\-\-+/g, '-') // Replace multiple - with single -
 .replace(/^-+/, '') // Trim - from start of text
 .replace(/-+$/, ''); // Trim - from end of text
}

function getNameAndDomain(){
  //get name:
  var nameVal = $('#name').val();
  if( nameVal != "" && nameVal != " "){
    name = slugify($('#name').val());
  } else {
    name = "yourname";
  }
  // get domain
  var domainVal = $('#domain').val();
  if ( isValidDomain( domainVal  ) ){
    domain = domainVal ;
  } else if(domainVal  != "" && domainVal  != null && domainVal  != " ") {
    domain = slugify(domainVal ) +".com"
  } else {
    domain = "yourdomain.com"
  }
  fullEmail = name +"@"+ domain;

  //Hide email inputs
  TweenLite.to(creative.dom.emailInputs, 0.3, {autoAlpha:0, zIndex:-1});
  //add full email to screen

  if(fullEmail.length > 30){
    creative.dom.findText.html(name +"@<br>"+ domain);
    $('.start-now-panel .gmail-for-work-block h3').html(name +"@<br>"+ domain);
    TweenLite.set(creative.dom.findText, {width:299});
    TweenLite.set('.start-now-panel .gmail-for-work-block h3', {width:299});
  } else {
    creative.dom.findText.html(fullEmail);
    $('.start-now-panel .gmail-for-work-block h3').html(fullEmail);
  }


  TweenLite.set(creative.dom.findText, {opacity:0,top:121});
  //add full email to last panel

  //show full email
  TweenLite.to(creative.dom.findText, 0.3, {opacity:1, zIndex:1, delay:1});
  TweenLite.to(creative.dom.findText, 0.3, {scale:1.2, delay:1.5});
  TweenLite.to(creative.dom.findText, 0.3, {scale:1, delay:1.8});

  //show final panel
  setTimeout(function(){
    TweenLite.to(creative.dom.footer, 0.3, {opacity:0});
    animatePanel('startNow');
    console.log('i ran')
  },3000);

  TweenLite.to(creative.dom.findText, 0.3, {opacity:1, zIndex:1, delay:0.5});
};

function finalTimeOuts() {

    setTimeout(function(){
      TweenLite.set(creative.dom.previewShimmer, {className: "+=shimmer"});
      TweenLite.to(creative.dom.previewShimmer,0.6, {autoAlpha:0,delay:0.1});
    }, 12000);


    var clickPreviewTimeout = setTimeout(function(){
    getNameAndDomain();
    }, 15000);

    creative.dom.exit.addEventListener('mouseover', function(){
       clearTimeout(clickPreviewTimeout);
       console.log('timeout cleared');
    });


}

function finalPanelActions(){
  TweenLite.to(creative.dom.startNowButton, 0.3, {autoAlpha:0});
  //kill cursor blinks on final panel
  creative.stopCursorBlink('birch');
  creative.stopCursorBlink('von');
  creative.stopCursorBlink('gizmo');
  //Hide find text and show
  TweenLite.to(creative.dom.findText, 0.3, { top: 15, delay:2});
  TweenLite.to(creative.dom.emailInputs, 0.3, {left: 0, opacity: 1, delay: 2.4})

  var name;
  var domain;
  var fullEmail;

  finalTimeOuts();
  $('.see-your-gmail').on('click', getNameAndDomain);

  function slugify(text)
  {
   return text.toString().toLowerCase()
   .replace(/\s+/g, '') // remove spaces
   .replace(/[^\w\-]+/g, '') // Remove all non-word chars
   .replace(/\-\-+/g, '-') // Replace multiple - with single -
   .replace(/^-+/, '') // Trim - from start of text
   .replace(/-+$/, ''); // Trim - from end of text
  }

  // $('.see-your-gmail').on('click', function(){
  //   //get name:
  //   var nameVal = $('#name').val();
  //   if( nameVal != "" && nameVal != " "){
  //     name = slugify($('#name').val());
  //   } else {
  //     name = "yourname";
  //   }
  //   // get domain
  //   var domainVal = $('#domain').val();
  //   if ( isValidDomain( domainVal  ) ){
  //     domain = domainVal ;
  //   } else if(domainVal  != "" && domainVal  != null && domainVal  != " ") {
  //     domain = slugify(domainVal ) +".com"
  //   } else {
  //     domain = "yourdomain.com"
  //   }
  //   fullEmail = name +"@"+ domain;
  //
  //   //Hide email inputs
  //   TweenLite.to(creative.dom.emailInputs, 0.3, {autoAlpha:0, zIndex:-1});
  //   //add full email to screen
  //
  //   if(fullEmail.length > 30){
  //     creative.dom.findText.html(name +"@<br>"+ domain);
  //     $('.start-now-panel .gmail-for-work-block h3').html(name +"@<br>"+ domain);
  //     TweenLite.set(creative.dom.findText, {width:299});
  //     TweenLite.set('.start-now-panel .gmail-for-work-block h3', {width:299});
  //   } else {
  //     creative.dom.findText.html(fullEmail);
  //     $('.start-now-panel .gmail-for-work-block h3').html(fullEmail);
  //   }
  //
  //
  //   TweenLite.set(creative.dom.findText, {opacity:0,top:121});
  //   //add full email to last panel
  //
  //   //show full email
  //   TweenLite.to(creative.dom.findText, 0.3, {opacity:1, zIndex:1, delay:1});
  //   TweenLite.to(creative.dom.findText, 0.3, {scale:1.2, delay:1.5});
  //   TweenLite.to(creative.dom.findText, 0.3, {scale:1, delay:1.8});
  //
  //   //show final panel
  //   setTimeout(function(){
  //     TweenLite.to(creative.dom.footer, 0.3, {autoAlpha:0, delay:0.5});
  //     animatePanel('startNow');
  //   },3000);
  //   //hide full email
  //   TweenLite.to(creative.dom.findText, 0.3, {opacity:1, zIndex:1, delay:0.5});
  // });

  return false;
}

function isValidDomain(domain) {
    var re = new RegExp(/^((?:(?:(?:\w[\.\-\+]?)*)\w)+)((?:(?:(?:\w[\.\-\+]?){0,62})\w)+)\.(\w{2,6})$/);
    return domain.match(re);
}



/**
 * Ad initialisation.
 */
function init() {

  addListeners();

  // Polite loading
  if (Enabler.isVisible()) {
    show();
  }
  else {
    Enabler.addEventListener(studio.events.StudioEvent.VISIBLE, show);
  }
}



/**
 *  Shows the ad.
 */
function show() {
  creative.dom.exit.style.display = "block";
    //run the animations
    animatePanelOne();

}





// ---------------------------------------------------------------------------------
// MAIN
// ---------------------------------------------------------------------------------

function exitClickHandler() {
  Enabler.exit('BackgroundExit');
}

/**
 *  Main onload handler
 */
window.addEventListener('load', preInit);