document.observe("dom:loaded", topflash_preinit);

var topflash;
var testpanel;

function topflash_preinit() {
  topflash = new TopFlash();
}
function topflash_init() {
  topflash.launch();
}

var TopFlash = Class.create({
  initialize: function() {
    this.current_idx = 1; //1-based
    this.panels = new Array();
    this.pics_holder = $("topflash_pics");

    this.panel_w = 220;
    this.panel_h = 220;
    this.panel_w_ext = 430;
    this.panel_h_ext = 250;
    this.holder_w = $("topflash_pics").getWidth();
    this.holder_h = $("topflash_pics").getHeight();

    this.slide_time = 0.9;

    this.animation_in_progress = false;

    this.autorun_timer = undefined;
    this.autorun_timeout = 5000; //msec

    this.images_loaded = 0;
    this.images = new Array();

    var navimgholder = $$("#topflash_navbot .images").first();

    //this.pics_holder.hide();

    for (var i=0; i<persons.length; i++) {
      var panel = new Panel(persons[i]);
      testpanel = panel;
      this.panels.push(panel);
      this.pics_holder.appendChild(panel.holder);
      panel.holder.setStyle({top:"-300px"});

      var thesrc = '/engine/picture.php?id='+persons[i].img_id+'&w=50&h=50&g=1';
      var thumb = new Element("img", {'id':'topidx_'+(i+1), 'src': thesrc});

      var oneimg = new Image();
      oneimg.observe("load", this.img_loaded.bindAsEventListener(this));
      oneimg.src = thesrc;
      if (!oneimg.complete) {
        this.images.push(oneimg);
      }

      thumb.observe('click', this.thumb_clicked.bindAsEventListener(this));
      navimgholder.appendChild(thumb);
    }

    if (this.images.length==0) {
      this.launch();
    }

  },

  img_loaded: function() {
    this.images_loaded++;
    if (this.images_loaded>=this.images.length) {
      this.launch();
    }
  },

  launch: function() {
    $("tf_loading").hide();

    $$('#topflash_navbot .prev').first().observe("click", this.switch_to_prev.bindAsEventListener(this));
    $$('#topflash_navbot .next').first().observe("click", this.switch_to_next.bindAsEventListener(this));
    $$('#mainnav .prev').first().observe("click", this.switch_to_prev.bindAsEventListener(this));
    $$('#mainnav .next').first().observe("click", this.switch_to_next.bindAsEventListener(this));

    this.adjust_zindexes(this.current_idx);
    this.set_panel_positions();
    this.resetTimeout();
    this.pics_holder.show();
  },

  resetTimeout: function() {
    if (this.autorun_timer!=undefined) {
      clearTimeout(this.autorun_timer);
    }
    this.autorun_timer = setTimeout(this.timeoutFired.bind(this), this.autorun_timeout);
  },

  timeoutFired: function() {
    this.switch_to_next();
  },

  thumb_clicked: function(evt) {
    var elt = evt.element();
    var idx = parseInt(elt.id.split("_")[1]);
    this.switch_to_idx(idx);
  },

  set_panel_positions: function(quick) {
    var maintime = 0.5;
    if (quick==true) maintime = 0;

    var steps = Math.ceil((this.panels.length-1)/2);
    var baseZIndex = 100; //z-index

    //position middle
    var curpanel; //currentpanel
    var posx, posy, posz; //target positions
    curpanel = this.panels[this.current_idx-1];
    posx = Math.round((this.holder_w-this.panel_w_ext)/2);
    posy = Math.round((this.holder_h-this.panel_h_ext)/2);
    posz = baseZIndex;
    var cx = Math.round((this.holder_w-this.panel_w_ext)/2);
    if (quick!=true) curpanel.holder.setStyle({zIndex:posz, top: '-250px', left:cx+"px"});
    curpanel.holder.morph("left:"+posx+"px;top:"+posy+"px", {duration: maintime});
    curpanel.expand(true);

    var contracted_center_x = Math.round((this.holder_w - this.panel_w)/2);

    for (var i=1; i<=steps; i++) {
      var theidx = this.current_idx-1 - i; //prev pane
      if (theidx<0) theidx = this.panels.length+theidx;
      curpanel = this.panels[theidx];
      posx = 0;//Math.round((this.holder_w-this.panel_w)/2);
      posy = Math.round((this.holder_h-this.panel_h)/2)+5;
      posz = baseZIndex-i;
      if (quick!=true) curpanel.holder.setStyle({zIndex:posz, left: "-250px"});
      curpanel.holder.morph("left:"+posx+"px;top:"+posy+"px", {duration: maintime});
      curpanel.contract(true);
      if (i>1) curpanel.holder.hide();

      theidx = this.current_idx-1 + i; //next pane
      if (theidx>(this.panels.length-1)) theidx = theidx - this.panels.length;
      curpanel = this.panels[theidx];
      posx = this.holder_w-this.panel_w;//Math.round((this.holder_w-this.panel_w)/2);
      posy = Math.round((this.holder_h-this.panel_h)/2)+5;
      posz = baseZIndex-i;
      if (quick!=true) curpanel.holder.setStyle({zIndex:posz, left: (this.holder_w+250)+"px"});
      curpanel.holder.morph("left:"+posx+"px;top:"+posy+"px", {duration: maintime, afterFinish: this.reappear_panels.bind(this)});
      curpanel.contract(true);
      if (i>1) curpanel.holder.hide();
    }

  },

  reappear_panels: function() {
    for (var i=0; i<this.panels.length; i++) {
      this.panels[i].holder.show();
    }
  },

  switch_to_idx: function(idx) { //idx is 1-based
    if (Math.abs(idx-this.current_idx)==1 || (this.current_idx==this.panels.length && idx==1) || (this.current_idx==1 && idx==this.panels.length)) {
      //standard animated move
      if (idx==this.current_idx+1 || (idx==1 && this.current_idx==this.panels.length)) {
        this.switch_to_next();
      }

      if (idx==this.current_idx-1 || (idx==this.panels.length && this.current_idx==1)) {
        this.switch_to_prev();
      }
    } else {
      //jump-move
      if (this.animating()) return false;

      this.resetTimeout();

      this.animation_in_progress = true;
      this.move_off();
      this.current_idx = idx;
      this.switch_repopulate.bind(this).delay(0.25);
      this.adjust_selector_frame(this.current_idx);
      $("topflash_pics").morph("top:0px", {delay: 0.3, duration: 0.7, afterFinish: this.switch_anim_complete.bind(this)});
    }
  },

  move_off: function() {
    var offtime = 0.2;

    for (var i=0; i<this.panels.length; i++) {
      var p = this.panels[i];
      if (p.expanded) {
        p.holder.morph("top:-250px", {duration: offtime});
      } else {
        if (parseInt(p.holder.getStyle("left"))==0) {
          p.holder.morph("left:-250px", {duration: offtime});
        } else {
          p.holder.morph("left:"+(this.holder_w+250)+"px", {duration: offtime});
        }
      }
    }
  },

  switch_repopulate: function() {
    this.adjust_zindexes(this.current_idx);
    this.set_panel_positions();
  },

  switch_anim_complete: function() {
    this.animation_in_progress = false;
  },

  adjust_zindexes: function(base_panelidx) {
    var baseZIndex = 100; //z-index

    var curpanel = this.panels[base_panelidx-1];
    curpanel.holder.setStyle({zIndex:baseZIndex});

    var steps = Math.ceil((this.panels.length-1)/2);

    var adjusted_cnt = 0;
    var adjust_total = this.panels.length - 1;

    j = 1;

    for (var i=1; i<=steps; i++) {
      var theidx = base_panelidx-1 - i; //prev pane
      if (theidx<0) theidx = this.panels.length+theidx;
      curpanel = this.panels[theidx];
      if (i>1) {
        var panex = "0px";
        curpanel.holder.setStyle({zIndex:baseZIndex-i, left:panex});
      } else {
        curpanel.holder.setStyle({zIndex:baseZIndex-i});
      }


      adjusted_cnt++;

      if (adjusted_cnt>=adjust_total) break;

      theidx = base_panelidx-1 + i; //next pane
      if (theidx>(this.panels.length-1)) theidx = theidx - this.panels.length;
      curpanel = this.panels[theidx];
      if (i>1) {
        var panex = (this.holder_w-this.panel_w)+"px";
        curpanel.holder.setStyle({zIndex:baseZIndex-i, left:panex});
      } else {
        curpanel.holder.setStyle({zIndex:baseZIndex-i});
      }

    }
  },

  adjust_selector_frame: function(idx) {
    var posx = $("topidx_"+idx).positionedOffset()[0] + 25;
    $("selector_frame").morph("left:"+posx+"px", {duration: 0});
  },

  switch_to_prev: function(evt) {
    if (evt!=undefined) Event.stop(evt);

    if (this.animating()) return false;
    this.animation_in_progress = true;

    this.resetTimeout();

    var next_idx;
    if (this.current_idx<=1) {
      next_idx = this.panels.length;
    } else {
      next_idx = this.current_idx-1;
    }

    this.adjust_zindexes(next_idx);

    var current_panel = this.panels[this.current_idx-1];
    var next_panel = this.panels[next_idx-1];

    var theleft = current_panel.holder.getStyle('left');
    var thetop_small = next_panel.holder.getStyle('top');
    var thetop_center = current_panel.holder.getStyle("top");
    var right = this.holder_w-this.panel_w;

    current_panel.contract();
    current_panel.holder.morph("left:"+right+"px;top:"+thetop_small, {duration: this.slide_time});

    next_panel.expand();
    next_panel.holder.morph('left:'+theleft+";top:"+thetop_center, {duration: this.slide_time, afterFinish:this.mark_animation_complete.bind(this)});

    this.current_idx = next_idx;
    this.adjust_selector_frame(next_idx);
  },

  switch_to_next: function(evt) {
    if (evt!=undefined) Event.stop(evt);

    if (this.animating()) return false;
    this.animation_in_progress = true;

    this.resetTimeout();

    var next_idx;
    if (this.current_idx>=this.panels.length) {
      next_idx = 1;
    } else {
      next_idx = this.current_idx+1;
    }

    this.adjust_zindexes(next_idx);

    var current_panel = this.panels[this.current_idx-1];
    var next_panel = this.panels[next_idx-1];

    var theleft = current_panel.holder.getStyle('left');
    var thetop_small = next_panel.holder.getStyle('top');
    var thetop_center = current_panel.holder.getStyle("top");

    current_panel.contract();
    current_panel.holder.morph("left:0px;top:"+thetop_small, {duration: this.slide_time});

    next_panel.expand();
    next_panel.holder.morph("left:"+theleft+";top:"+thetop_center, {duration: this.slide_time, afterFinish:this.mark_animation_complete.bind(this)});

    this.current_idx = next_idx;
    this.adjust_selector_frame(next_idx);
  },

  animating: function() {
    if (this.animation_in_progress==true) return true;

    for (var i=0; i<this.panels.length; i++) {
      if (this.panels[i].animating==true) return true;
    }

    return false;
  },

  mark_animation_complete: function() {
    this.animation_in_progress = false;
    this.set_panel_positions(true);
  }
})