$(document).ready(function(){
var wheight=$(window).height();
var wwidth=$(window).width();
//alert(wwidth);
$('.story article').css('height',wheight);
//$('#line-intro').css('height',wheight);
if (wwidth < 1620)
{$("#style").attr('href','myvle/css/style1600.css');}
else if (wwidth < 1960)
{$("#style").attr('href','myvle/css/style1900.css');}
else if (wwidth < 2224)
{$("#style").attr('href','myvle/css/style2100.css');}
else if (wwidth < 2450)
{$("#style").attr('href','myvle/css/style2300.css');}
else if (wwidth > 2350)
{$("#style").attr('href','myvle/css/style2600.css');}
});
/* Initialize */
jQuery(
function ($) {
$.Body = $('body');
$.Window = $(window);
$.Scroll = ($.browser.mozilla || $.browser.msie) ? $('html') : $.Body;
$.Mobile = ($.Body.hasClass('webkit-mobile') || (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))),
$.Unsupported = $.Body.hasClass('unsupported-browser');
$.Body
.Keyboard()
.Omniture();
$('[data-controller]').Instantiate();
$('[data-target=_blank]').TargetBlank();
}
);
/* ---------------------------------- */
/* Events */
(function($) {
$.Events = {
OMNITURE_TRACK: 'omnitureTrack',
OMNITURE_TRACK_LINK: 'omnitureTrackLink',
SECTION_ENTER: 'sectionEnter',
SCROLL_TO: 'scrollTo',
SCROLL: 'windowScroll',
SCROLL_ENTER: 'windowScrollEnter',
SCROLL_LEAVE: 'windwScrollLeave',
KEY_UP: 'keyUp',
KEY_DOWN: 'keyDown',
KEY_LEFT: 'keyLeft',
KEY_RIGHT: 'keyRight',
KEY_ESC: 'keyEsc',
KEY_SPACE: 'keySpace',
PROOF_POINT: 'proofPointMore'
} // Events
$.Views = {
} // Views
})(jQuery);
/* ---------------------------------- */
/* Auto Instantiate */
(function($) {
$.fn.Instantiate = function(settings) {
var config = {};
if (settings) $.extend(config, settings);
this.each(function() {
var $self = $(this),
$controller = $self.attr('data-controller');
if ($self[$controller])
$self[$controller]();
});
}
})(jQuery);
/* ---------------------------------- */
/* Omniture */
(function($) {
$.fn.Omniture = function(settings) {
var config = {};
if (settings) $.extend(config, settings);
this.each(function() {
var $self = $(this),
$track = $('[data-omniture]').OmnitureTrack()
$exits = $('[data-omniturelink]').OmnitureTrackLink();
$.Body
.bind($.Events.OMNITURE_TRACK,
function(e,id) {
// trackContent('http://www.nikebetterworld.com/'+id)
})
.bind($.Events.OMNITURE_TRACK_LINK,
function(e,url) {
trackExit(url)
})
});
return this;
}
$.fn.OmnitureTrack = function(settings) {
var config = {};
if (settings) $.extend(config, settings);
this.each(function() {
var $self = $(this),
$id = $self.attr('data-omniture');
$self
.Scrollable({})
.bind($.Events.SCROLL_ENTER,
function(e) {
_track($id)
})
function _track(id) {
$.Body.triggerHandler($.Events.OMNITURE_TRACK,id);
}
});
return this;
}
$.fn.OmnitureTrackLink = function(settings) {
var config = {};
if (settings) $.extend(config, settings);
this.each(function() {
var $self = $(this),
$id = $self.attr('href');
$self
.bind('click',
function(e) {
_track($id)
})
function _track(id) {
$.Body.triggerHandler($.Events.OMNITURE_TRACK_LINK,id);
}
});
return this;
}
})(jQuery);
/* ---------------------------------- */
/* Shell */
(function($) {
$.fn.SHELL = function(settings) {
var config = {};
if (settings) $.extend(config, settings);
this.each(function() {
});
return this;
}
})(jQuery);
/* ---------------------------------- */
/* ProofPoints */
(function($) {
$.fn.ProofPoints = function(settings) {
var config = {};
if (settings) $.extend(config, settings);
this.each(function() {
var $self = $(this),
$id = $self.attr('id'),
$points = $self.find('[data-proofpoint]'),
$points_container = $self.find('.proof-points-container'),
$more = $self.find('nav.more a'),
_active = 0;
$self.Scrollable({is_nav:true})
/*$.Window
.bind('scroll',
function(){
if ( $.inview($self,{threshold:0}) ) {
if (!$self.hasClass('active')) {
$self.addClass('active');
$.Body.triggerHandler($.Events.SECTION_ENTER,$id);
}
}else{
$self.removeClass('active');
}
})*/
$points.ProofPoint({owner:$self})
$more
.bind('mousedown',
function(e){
$more.addClass('_down');
})
.bind('mouseup',
function(e){
$more.removeClass('_down');
})
.bind('click',
function(e){
_active++;
if(_active>$points.length-1)
_active=0;
var dir = (_active==0) ? -1 : 1;
$self.triggerHandler($.Events.PROOF_POINT,[_active,dir])
$points_container.stop().animate({marginTop:-_active*400},850,'easeOutExpo')
e.preventDefault();
})
});
return this;
} //ProofPoint
$.fn.ProofPoint = function(settings) {
var config = {};
if (settings) $.extend(config, settings);
this.each(function(index) {
var $self = $(this),
$h1 = $self.find('h1'),
$headline = $self.attr('data-share'),
$summary = $self.find('p').html(),
$copy = $self.find('section.proof-description'),
$icons = $('').appendTo($copy),
_heading = $h1.html();
$self.css({left:index*500})
config.owner
.bind($.Events.PROOF_POINT,
function(e,i,dir){
if (i==index)
_show(dir);
else
_hide(dir);
});
function _show(dir) {
$self.stop().animate({opacity: 1},800,'easeOutExpo')
$.Body.triggerHandler($.Events.OMNITURE_TRACK,'proofpoint_'+escape($headline))
}
function _hide(dir) {
$self.stop().animate({opacity: 0},800,'easeOutExpo')
}
});
return this;
} // ProofPoint
})(jQuery);
/* ---------------------------------- */
/* Share */
/* ---------------------------------- */
/* Scrollable */
(function($) {
$.fn.Scrollable = function(settings) {
var config = { threshold: -100, offset_scroll: 4, offset_intertia: .15 };
if (settings) $.extend(config, settings);
this.each(function() {
var $self = $(this),
$id = $self.attr('id');
config.threshold = 0
if ($.Mobile || $.Unsupported) {
$self.css({backgroundAttachment:'scroll'})
}else{
$.Window
.bind('scroll',
function(e){
if ( $.inview($self,{threshold:config.threshold}) ) {
if (!$self.hasClass('_active')){
$self.addClass('_active');
if (config.is_nav)
$.Body.triggerHandler($.Events.SECTION_ENTER,$id);
$self.triggerHandler($.Events.SCROLL_ENTER);
}
_scroll_background();
$self.triggerHandler($.Events.SCROLL,$.distancefromfold($self,{threshold:config.threshold}) - config.threshold)
}else{
if ($self.hasClass('_active')){
$self.removeClass('_active');
$self.triggerHandler($.Events.SCROLL_LEAVE);
}
}
})
}
function _scroll_background() {
var _x = '0% '
var bpos = _x + (-($.distancefromfold($self,{threshold:config.threshold}) - config.threshold) * config.offset_intertia) + 'px';
$self.css({'backgroundPosition':bpos})
}
if (config.auto_scroll)
_scroll_background();
});
return this;
} //Story
$.fn.MyVlemotto = function() {
this.each(function() {
var $self = $(this),
$header = $self.find('header'),
$h1 = $self.find('h1'),
$h2 = $self.find('h2'),
$span = $self.find('span'),
$img = $self.find('img'),
_threshold = -200;
$self
.Scrollable({threshold: _threshold,is_nav:true,auto_scroll:true})
.bind($.Events.SCROLL,on_scroll)
.bind($.Events.SCROLL_ENTER,on_scroll_enter)
.bind($.Events.SCROLL_LEAVE,on_scroll_leave);
$h1
.css({cursor:'pointer'})
.bind('click',function(){$a_play.triggerHandler('click')})
function on_scroll(e,distance) {
$span
.css({marginTop:75-Math.floor(distance/10)})
}
function on_scroll_enter(e) {
}
function on_scroll_leave(e) {
$self.removeClass('_playing');
//$darkslide.stop().css({height:0,opacity:0});
}
});
return this;
} //Video
$.fn.MyVlegoal = function() {
this.each(function() {
var $self = $(this),
$header = $self.find('header'),
$bg = $self.find('.bg'),
$h1 = $self.find('h1'),
$h2 = $self.find('h2'),
$id = $self.attr('id'),
$img = $self.find('img'),
_threshold = -200;
$self
.Scrollable({threshold: _threshold,is_nav:true})
.bind($.Events.SCROLL,on_scroll)
.bind($.Events.SCROLL_ENTER,on_scroll_enter)
.bind($.Events.SCROLL_LEAVE,on_scroll_leave);
function on_scroll(e,distance) {
var bpos = '0% ' + ($.Window.height()/2.5-distance/3) + 'px';
$bg.css({'backgroundPosition':bpos})
}
function on_scroll_enter(e) {
}
function on_scroll_leave(e) {
}
});
return this;
} //MyVlegoal
$.fn.MyVlefeatures = function() {
this.each(function() {
var $self = $(this),
$id = $self.attr('id'),
_threshold = -200;
$self
.Scrollable({threshold: _threshold,is_nav:true})
});
return this;
} //MyVlefeatures
$.fn.MyVlejoin = function() {
this.each(function() {
var $self = $(this),
$id = $self.attr('id'),
_threshold = -200;
$self
.Scrollable({threshold: _threshold,is_nav:true})
});
return this;
} //StoryN7
})(jQuery);
/* ---------------------------------- */
/* MainNav */
(function($) {
$.fn.MainNav = function() {
this.each(function() {
var $self = $(this),
$ul = $('').appendTo($self),
$sections = $('[data-nav]'),
_sections = new Array(),
$navs = new Array(),
_active = 0;
if (!$.Mobile && !$.Unsupported) {
$sections.each(
function(i){
_sections.push($(this))
$('').appendTo($ul).DotNav({id:$(this).attr('id'),name:$(this).attr('data-nav')});
})
//$self.css({marginTop:-$self.height()/2})
}
$.Body
.bind($.Events.SECTION_ENTER,
function(e,id){
$sections.each(
function(i){
if ($(this).attr('id')==id)
_active = i;
})
})
.bind($.Events.KEY_RIGHT,
function(e){
_active++;
if (_active>$sections.length-1)
_active=$sections.length-1;
_seek();
})
.bind($.Events.KEY_LEFT,
function(e){
_active--;
if (_active<0)
_active=0;
_seek()
})
function _seek() {
$.Body.triggerHandler($.Events.SCROLL_TO,_sections[_active].attr('id'))
}
});
return this;
} // Main Nav
$.fn.DotNav = function(settings) {
var config = {};
if (settings) $.extend(config, settings);
this.each(function() {
var $self = $(this),
$a = $(''),
$h1 = //$('').appendTo($self),
$span = $('').html(config.name).appendTo($h1),
$id = config.id;
$a
.attr('href',"/"+config.name.split(' ').join('_'))
.attr('class',config.name.split(' ').join('_')+"nav")
.html($id)
.appendTo($self)
.bind('click',
function(e){
if($id=='index'){
$id='tttheight';
}
//alert('vikas');
if($id=='features'){
$id='up_pposition';
}
$.Body.triggerHandler($.Events.SCROLL_TO,$id)
e.preventDefault();
})
$self
.attr('data-id',$id);
if($id=='Jointherevolution'){
$('.join_the_revolutionnav') .text('Join the Revolution');
}
$a
.bind('mouseenter',
function(e) {
if ($('._playing').length==0)
if ($.browser.msie)
$h1.stop().css({display:'block',right: 30})
else
$h1.stop().css({display:'block'}).animate({right:30,opacity:1},450,'easeOutQuart')
})
.bind('mouseleave',
function(e) {
if ($.browser.msie)
$h1.stop().css({display:'none',right: 30})
else
$h1.stop().animate({right:15,opacity:0},450,'easeOutQuart',function(){$h1.stop().css({display:'none'})})
});
$.Body
.bind($.Events.SECTION_ENTER,
function(e,id){
//alert(id+'X'+$id);
if (id==$id){
$self.addClass('active')}
else{
$self.removeClass('active')}
});
});
return this;
} // DotNav
})(jQuery);
/* ---------------------------------- */
/* Counter */
(function($) {
$.fn.Counter = function() {
this.each(function() {
//this function sets up the footer icons for twitter, facebook and z
var $self = $(this),
$mark = $self.find('mark'),
$share = $('').addClass('share-counter').appendTo($self),
$a_fb = $('').html('Facebook').attr({href:'#icon-msg','title':'mail'}).addClass('icon-msg'),
//$a_twitter = $('').html('Twitter').attr({href:'#/twitter','title':'Twitter'}).addClass('icon-twitter'),
$terms = $('').html('Terms').attr({href:'#/Terms','title':'Terms'}).addClass('orkut'),
_total = 0;
//these 3 variables show the order of how the logos appear. just move the order around to make a change
//this code is repeated down in the 2nd function below. for the side icons
if (com_nbw_lang == 'pt-br') { //notice the language. I will have to make the change to maybe 'en-US' or what ever i need
}
//notice i commented out $a_orkut but didnt delete just in case i may need it
//$a_orkut.appendTo($share)
$a_fb.appendTo($share);
$a_twitter.appendTo($share)
$a_orkut.appendTo($share);
$a_fb
.bind('click',
function(e){
var _fb = window.open('http://www.facebook.com/sharer.php?s=100&p[url]=http://www.nikebetterworld.com&p[title]='+headline()+'&p[images][0]=http://www.nikebetterworld.com/images/nbw_facebook.png' ,'_fb','width=550,height=450')
_centerPopup(_fb)
$.Body.triggerHandler($.Events.OMNITURE_TRACK,'facebook_scroll')
e.preventDefault();
})
$a_twitter
.bind('click',
function(e){
var _tweet = window.open('http://twitter.com/?status='+headline(1) + escape(' #NikeBetterWorld'),'_tweet','width=1024,height=600,scrollbars=yes')
_centerPopup(_tweet)
$.Body.triggerHandler($.Events.OMNITURE_TRACK,'twitter_scroll')
e.preventDefault();
})
//andre test button (icon_share_orkut.png) for the css class "orkut" (this is the first of two button function calls). this is for the footer icon
$a_orkut
.bind('click',
function(e){
//i am going to need to change this variable "_fb" to "_orkut" in both of my button functions once i get the correct url
var _orkut = window.open('http://promote.orkut.com/preview?nt=orkut.com&tn=http://www.nikebetterworld.com/images/nbw_facebook.png&tt=Nike%20Better%20World%20&du=http://www.nikebetterworld.com&cn='+headline(),'_orkut','width=550,height=450')
_centerPopup(_orkut)
$.Body.triggerHandler($.Events.OMNITURE_TRACK,'facebook_scroll')
e.preventDefault();
})
//end of andre test
function headline(tw) {
if (com_nbw_lang == 'pt-br') {
if (tw) {
return ('Eu rolie ' + $mark.html() + ' pixels em direcao a um mundo melhor. http://www.nikebetterworld.com');
}
else {
return ('Eu rolie ' + $mark.html() + ' pixels em direção a um mundo melhor. http://www.nikebetterworld.com');
}
}
else {
return ('I scrolled ' + $mark.html() + ' pixels toward a Better World. http://www.nikebetterworld.com');
}
}
function _centerPopup(_win) {
_win.focus();
_win.moveTo($(window).width()/2 - 275, $(window).height()/2 - 225)
}
$.Window
.bind('scroll',
function(e){
var scrolled = $(window).scrollTop();
if (scrolled>999) {
scrolled = _comma(scrolled.toString());
}
$mark.html(scrolled)
});
function _comma(nStr){
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
});
return this;
}
})(jQuery);
/* ---------------------------------- */
/* SiteShare */
(function($) {
$.fn.SiteShare = function() {
//this is the code for the side buttons icons twitter, facebook & orkut
this.each(function() {
var $self = $(this).addClass('active'),
$share_fb = $self.attr('fb-share'),
$share_tw = $self.attr('tw-share'),
$share_ok = $self.attr('ok-share'),
$start = $('#Jointherevolution'),
$end = $('#features'),
//$a_twitter = $('').html('Twitter').attr({href:'#/twitter','title':'Twitter'}).addClass('icon-twitter'),
//$a_fb = $('').html('Contact us').attr({href:'#inline3','title':'Mail'}).addClass('icon-msg inline3'),
//$a_tm = $('').html('© 2012 myVLE | Terms and conditions').attr({'title':'termscondition'}).addClass('terms'),
_total = 0;
$.Window
.bind('scroll',
function() {
_adjust_display();
})
if (!$.Mobile && !$.Unsupported) {
//this controlls the side button icon for twitter, facebook and orkut. if you want to move the order of how the icons look just switch the 3 variables around
//this code is repeated above in the 1st function for the footer icons
//notice i commented out $a_orkut but didnt delete just in case i may need it
//$a_orkut.appendTo($self)
//$a_tm.appendTo($self)
//$a_twitter.appendTo($self)
//$a_fb.appendTo($self)
}
_adjust_display()
// $a_fb
// .bind('click',
// function(e){
//
// var _fb = window.open('')
//
// _centerPopup(_fb)
//
// $.Body.triggerHandler($.Events.OMNITURE_TRACK,'facebook_site')
//
// e.preventDefault();
//
// })
//
//
// $a_twitter.bind('click', function(e) {
//
// var _tweet = window.open('');
//
// _centerPopup(_tweet)
//
// $.Body.triggerHandler($.Events.OMNITURE_TRACK,'twitter_site')
//
// e.preventDefault();
//
// });
//
////andre test button orkut (this is the 2nd of two button calls)
// $a_orkut
// .bind('click',
// function(e){
// //i am going to need to change this variable "_fb" to "_orkut" in both of my button functions once i get the correct url
// var _orkut = window.open('http://promote.orkut.com/preview?nt=orkut.com&tn=http://www.nikebetterworld.com/images/nbw_facebook.png&tt=Nike%20Better%20World&du=http://www.nikebetterworld.com&cn='+$share_ok,'_orkut','width=550,height=450')
//
// _centerPopup(_orkut)
//
// $.Body.triggerHandler($.Events.OMNITURE_TRACK,'facebook_site')
//
// e.preventDefault();
//
// })
//end of test button orkut
function _centerPopup(_win) {
_win.focus();
_win.moveTo($(window).width()/2 - 275, $(window).height()/2 - 225)
}
function _adjust_display() {
/* */
if($.abovethetop($end,{threshold:0})){
if (!$self.hasClass('active')) {
$self.animate({bottom: 25},400,'easeOutQuart')
$self.addClass('active')
}
}else{
if ($self.hasClass('active')) {
$self.animate({bottom: -35 },400,'easeOutQuart')
$self.removeClass('active')
}
}
}
});
return this;
}
})(jQuery);
/* ---------------------------------- */
/* SiteScroll */
(function($) {
$.fn.SiteScroll = function() {
this.each(function() {
var $self = $(this);
$.Body
.bind($.Events.SCROLL_TO,
function(e,id){
var $element = $('#'+id),
$header = $element.find('header'),
_align = $element.attr('data-align'),
_offset = $element.attr('data-scrolloffset') ? parseInt($element.attr('data-scrolloffset')) : 50,
_top = $element.offset().top;
if ($header.length>0 && _align!="top") {
_top = $header.offset().top + $header.height()/2 - $.Window.height()/2;
if (_top > $header.offset().top)
_top = $header.offset().top - 50
}
if (_align=="center" && $element.height()>$.Window.height()) {
_top = $element.offset().top + ($element.height()-$.Window.height())/2
}
// alert($.Window.height());
//alert($element.height());
//alert($element.offset().top);
//alert(_top);
$.Scroll
.stop()
.animate(
{ 'scrollTop': _top },
5000,
'easeInOutQuart'
)
})
});
return this;
}
})(jQuery);
/* ---------------------------------- */
/* TargetBlank */
(function($) {
$.fn.TargetBlank = function() {
this.each(function() {
var $self = $(this);
$self
.attr('target','_blank')
.bind('click',on_click);
function on_click(e){
}
});
return this;
}
})(jQuery);
/* ---------------------------------- */
/* Keyboard */
(function($) {
$.fn.Keyboard = function(settings) {
var config = {};
if (settings) $.extend(config, settings);
this.each(function() {
var $self = $(this);
$(document)
.bind('keydown',on_keydown);
function on_keydown(e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
switch(key) {
case 27: //escape
$.Body.triggerHandler($.Events.KEY_ESC);
break;
case 32: //space
$.Body.triggerHandler($.Events.KEY_SPACE);
break;
case 38: //top
$.Body.triggerHandler($.Events.KEY_UP);
break;
case 39: //right
$.Body.triggerHandler($.Events.KEY_RIGHT);
e.preventDefault();
break;
case 40: ///bottom
$.Body.triggerHandler($.Events.KEY_DOWN);
break;
case 37: //left
$.Body.triggerHandler($.Events.KEY_LEFT);
break;
}//switch
}//keydown
});
return this;
}
})(jQuery);
/* ---------------------------------- */
/* Worker */
(function($) {
$.distancefromfold = function($element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).height() + $(window).scrollTop();
} else {
var fold = $(settings.container).offset().top + $(settings.container).height();
}
return (fold + settings.threshold) - $element.offset().top ;
};
$.belowthefold = function($element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).height() + $(window).scrollTop();
} else {
var fold = $(settings.container).offset().top + $(settings.container).height();
}
return fold <= $element.offset().top - settings.threshold;
};
$.rightoffold = function($element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).width() + $(window).scrollLeft();
} else {
var fold = $(settings.container).offset().left + $(settings.container).width();
}
return fold <= $element.offset().left - settings.threshold;
};
$.abovethetop = function($element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).scrollTop();
} else {
var fold = $(settings.container).offset().top;
}
return fold >= $element.offset().top + settings.threshold + $element.height();
};
$.leftofbegin = function($element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).scrollLeft();
} else {
var fold = $(settings.container).offset().left;
}
return fold >= $element.offset().left + settings.threshold + $element.width();
};
$.inview = function($element, settings) {
return ($.abovethetop($element,settings)!=true && $.belowthefold($element,settings)!=true)
};
$.extend($.expr[':'], {
"below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
"above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
"right-of-fold" : "$.rightoffold(a, {threshold : 0, container: window})",
"left-of-fold" : "!$.rightoffold(a, {threshold : 0, container: window})"
});
})(jQuery);