var splash = {};
var backgrounds = [{src:   'http://www.runescape.com/l=1/img/main/splash/promos/2.jpg', ready: false, image: {} },{src:   'http://www.runescape.com/l=1/img/main/splash/promos/1.jpg', ready: false, image: {} },{src:   'http://www.runescape.com/l=1/img/main/splash/promos/4.jpg', ready: false, image: {} },{src:   'http://www.runescape.com/l=1/img/main/splash/promos/3.jpg', ready: false, image: {} },{src:   'http://www.runescape.com/l=1/img/main/splash/promos/5.jpg', ready: false, image: {} }];

$(function(){

 
 if (swfobject.getFlashPlayerVersion().major >= 7){
  splash.promo = new splash.flashSlider;
 }
 else{
  splash.promo = new splash.jsSlider;
 }
 splash.promo.initialise();

 
 splash.menu.initialise();

 
 splash.screenshots.initialise();

 
 $(window).unload(function(){
  if(history && history.replaceState){ history.replaceState( {}, "RuneScape", "http://www.runescape.com/l=1/splash.ws" ); }
 });

});



 splash.flashSlider = function(){

  var
   _this = this,
   movie = false
  ;

  this.setSlider = function(to){

   if(movie && movie.slideLeft){
    if(to === 'left'){
     movie.slideLeft();
    }
    else if(to === 'right'){
     movie.slideRight();
    }
    else{
     movie.slideJump(to);
    }
   }

  };

  this.initialise = function(){

   $('#promo1, #promo2').remove();

   swfobject.embedSWF(
    "http://www.runescape.com/l=1/img/main/splash/promos/slider.swf",
    "flash",
    "100%",
    800,
    "8.0.0",
    null,
    {
     data_url: "http://www.runescape.com/l=1/splash_xml.ws"
    },
    {
     scale: 'showall',
     wmode: "opaque",
     allowScriptAccess: "always"
    },
    null,
    function(ev){movie = ev.ref; }
   );

   var $promoPoints = $('#PromoPoints').children('a');

   window.SliderUpdated = function(i){
    $promoPoints.filter('.selected').removeClass('selected').children('img').eq(1).stop(true,true).css({opacity: ''}).fadeIn();
    $promoPoints.eq(i).addClass('selected').children('img').eq(1).stop(true,true).css({opacity: ''}).fadeOut();
   };

   SliderUpdated(0);

   $('#mediaWrapperPrevious').on('click', function(ev){ _this.setSlider('left'); ev.preventDefault(); });
   $('#mediaWrapperNext').on('click', function(ev){ _this.setSlider('right'); ev.preventDefault(); });
   $promoPoints.on('click', function(ev){
    _this.setSlider($promoPoints.index($(this)));
    ev.preventDefault();
   });

  }

 }

 splash.jsSlider =  function(){
  var $this = this,
    settings = {};

  var queue = {
   request: function(indx){
    if(typeof(backgrounds[indx]) != 'undefined'){
     var img = new Image();
     img.src = backgrounds[indx].src;
     img.onload = function(){
      backgrounds[indx].ready = true;
      backgrounds[indx].image = img;
      if(typeof(backgrounds[indx+1]) != 'undefined') queue.request(indx+1);
     }
    }
   },

   poll: function(_options){
    if(typeof(backgrounds[_options.indx]) != 'undefined'){
     if(backgrounds[_options.indx].ready){
      clearTimeout(settings.timers.poll);
      _options.ready(_options.indx);
     }
     else {
      settings.timers.poll = setTimeout(function(){
       queue.poll(_options);
      }, settings.backgrounds.check_every);
     }
    }
   }
  };

  /* SLIDE ANIMATION */
  var slider = {
   initialise: function(){
    slider.events();

    queue.request(0);

    queue.poll({
     indx: 0,
     ready: slider.start
    });
   },

   timeout: function(_indx){
    clearTimeout(settings.timers.switcher);
    settings.timers.switcher = setTimeout(function(){
     queue.poll({
      indx: _indx,
      ready: slider.slide
     });
    }, settings.backgrounds.change_every);
   },

   center: {
    calculate: function(_img_width){
     var window_width = $('#promoPresenter').width();
     var img_width = _img_width;

     return -(_img_width - $('#promoPresenter').width())/2;
    },

    fix: function(){
     var current_background = $('#promoPresenter div[data-current]');
     current_background.css({
      left: slider.center.calculate(backgrounds[current_background.attr('data-index')].image.width)
     });
    }
   },

   start: function(_indx){
    settings.backgrounds.one.css({
     width: backgrounds[_indx].image.width,
     left: slider.center.calculate(backgrounds[_indx].image.width)
    }).animate({
     opacity: 1
    }, settings.backgrounds.animation.come_in, function(){
     slider.timeout(1);
    });
   },

   slide: function(_indx){

    var $sel = settings.promoPoints.filter('.active');
    var bgs = backgrounds.length;
    var cur = settings.promoPoints.index($sel);
    if(cur < 0) { cur = 0; }

    if(_indx == cur || settings.animating){ return; }
    if(_indx == 'left'){
     _indx = cur - 1;
     if(_indx < 0){ _indx = bgs-1; }
    }
    else if(_indx == 'right'){
     _indx = cur + 1;
     if(_indx >= bgs){ _indx = 0; }
    }

    settings.promoPoints.removeClass('active');
    settings.promoPoints.eq(_indx).addClass('active');
    settings.animating = true;

     var slide_in = settings.backgrounds.two.css('opacity') == 1 || (settings.backgrounds.two.css('opacity') == 0 && settings.backgrounds.one.css('opacity') == 0) ? settings.backgrounds.one : settings.backgrounds.two;
    var slide_out = slide_in == settings.backgrounds.one ? settings.backgrounds.two : settings.backgrounds.one;

    slide_in.css({
     'background-image': 'url('+backgrounds[_indx].src+')',
     width: backgrounds[_indx].image.width,
     left: -backgrounds[_indx].image.width
    }).attr({
     'data-current': true,
     'data-index': _indx
    });

    var difference = $('#promoPresenter').width()-slider.center.calculate(backgrounds[_indx].image.width);

    slider.animate({
     difference: difference,
     slide_in: slide_in,
     slide_out: slide_out,
     indx: _indx
    });
   },

   animate: function(_options){
    $({
       diff: 0
      }).animate({
       diff: _options.difference
      },{
       duration: 1000,
       step: function(_step){
      var opacity = _step/_options.difference;
      _options.slide_in.css({
       left: -backgrounds[_options.indx].image.width+_step,
       opacity: 0+opacity
      });
      _options.slide_out.css({
       left: slider.center.calculate(backgrounds[_options.indx].image.width)+_step,
       opacity: 1-opacity
      });
     },
     complete: function(){
      settings.animating = false;
      slider.timeout(_options.indx == backgrounds.length-1 ? 0 : _options.indx+1);
     },
     queue: false
    });
   },

   events: function(){
    $(window).resize(function(){
     slider.center.fix();
    });
   }
  }

  function reset_animation(){
   settings.backgrounds.one.stop(true,false);
   settings.backgrounds.two.stop(true,false);
   settings.title.div.stop(true,false);
   slider.timeout($('#promoPresenter div[data-current]').attr('data-index')+1);
  }

  this.initialise = function(){
   settings = {
    timers: {
     switcher: {},
     poll: {}
    },
    promoPoints: $("#PromoPoints a"),
    title: {
     div: $('#PlayNowWrapper'),
     fade: {
      come_in: 500,
      go_out: 500
     }
    },
    backgrounds: {
     one: $('#promo1'),
     two: $('#promo2'),
     animation: {
      come_in: 1000,
      go_out: 1000
     },
     check_every: 50,
     change_every: 7500
    }
   };

   slider.initialise();

   events();
  }

  function events(){
   $('#mediaWrapperNext').click(function(ev){
    cancelEvent(ev);
    slider.slide('right');
   });

   settings.promoPoints.click(function(ev){
    cancelEvent(ev);
    slider.slide($(this).index());
   });

   $('#mediaWrapperPrevious').click(function(ev){
    cancelEvent(ev);
    slider.slide('left');
   });
  }

  function cancelEvent(ev){
   ev.preventDefault();
   reset_animation();
  }
 }





 splash.menu = new function(){
  var $this = this,
    settings = {};

  this.initialise = function(){
   settings = {
    state: 'up',
    header: $('#headerWrapper'),
    logo: $('#runescapeLogoTop'),
    tab: $('#registerLoginTab'),
    form: $('#registrationLoginWrapper'),
    difference: 78
   };

   events();
  }

  this.toggle = function(){
   var direction = settings.state == 'down' ? 'up' : 'down';
   settings.form.fadeOut(300, function(){
    $({
     diff: direction == 'down' ? 0 : settings.difference
    }).animate({
     diff: direction == 'down' ? settings.difference : 0
    },{
     duration: 500,
     step: function(_step){
      var opacity = (_step/100)*(100/settings.difference);
      settings.tab.css('opacity',0+opacity);
      settings.header.css('marginTop',-78+_step);
      settings.logo.css('top',0+_step);
     },
     complete: function(){
      settings.state = direction;
      if(direction == 'down') settings.form.fadeIn(300);
     }
    });
   });
  }

  function events() {
   $('.toggleMenu').click(function(ev){
    ev.preventDefault();
    $this.toggle();
   });
  }
 }





 splash.screenshots = new function(){

  var $next, $previous;

  this.initialise = function(){
   var
    $ssW = $('#screenshotWrapper').removeClass('nojs'),
    $ssA = $ssW.children('div'),
    $items = $ssA.children('a'),
    $zero = $items.eq(0),
    itemW = $zero.outerWidth(true),
    margin = itemW - $zero.outerWidth(false),
    holderW = itemW * 3 - margin,
    railW = holderW * 3,
    o = {
     shown: 3,
     slide: 800,
     fade: true,
     fadeIn: 1000,
     fadeOut: 1200,
     ss: 19,
     ssBase: 'http://www.runescape.com/l=1/img/main/splash/screenshots/'
    },
    animating = false
   ;

   $prev = $('#prevScreen').show();
   $next = $('#nextScreen').show();

   
   $ssW.width( holderW );
   $ssA.width( railW ).css({position: 'absolute'});

   
   $items.detach();
   for(var i = $items.length+1; i <= o.ss; i++){
    $items = $items.add(
     $zero
      .clone()
      .attr({href: o.ssBase+i+'.jpg'})
       .children('img')
        .attr({src: o.ssBase+i+'s.jpg'})
       .end()
    );
   }
   $items.appendTo( $ssA );

   
   if( o.fade ){ $items.slice(o.shown, $items.length).find('img').hide(); }

   $prev.add($next).on('click', function(ev){

    ev.preventDefault();

    if(animating){ return; }
    else {
     animating = true;
    }

    $items = $ssA.children('a');

    var
     $this = $(this),
     dir = ($this.is($next) ? true : false),
     $out = $items.slice(0,3),
     $in = (dir ? $items.slice(3,6) : $items.slice($items.length-3,$items.length)),
     $outImg = $out.children('img'),
     $inImg = $in.children('img')
    ;

    
    if(!dir){
     $in.prependTo($ssA);
     $ssA.css({left: -holderW});
    }

    
    $ssA
     .animate(
      {left: (dir ? -holderW : 0)},
      {
       duration: o.slide,
       complete: function(){
        
        if(dir){
         $out.appendTo($ssA);
         $ssA.css({left: 0});
        }
        if(o.fade){ $outImg.hide(); }
        animating = false;
       }
      }
     )
    ;

    
    if(o.fade){
     $outImg.fadeOut(o.fadeOut);
     $inImg.fadeIn(o.fadeIn);
    }

   });


   

   $items
    .each(function(){ var $this = $(this);
     $this.children('span').clone().hide().addClass('glow').appendTo( $this );
    })
    .hover(
     function(){ $(this).children('.glow').stop(true,true).fadeIn(300); },
     function(){ $(this).children('.glow').stop(true,true).fadeOut(300); }
    )
   ;

   

   Shadowbox.init({
    continuous:true,
    counterType:"skip",
    overlayColor:"#000000",
    overlayOpacity:0.8,
    players: ['img', 'iframe']
   });


  };

 }