/*
MooTools en fx.slide zijn nodig.
Voor Internet Explorer 7 ondersteuning moet in fx.slide's initialize methode de volgende regel aangepast:

  if (this.options.hideOverflow) styles = $extend(styles, {overflow: 'hidden' });

naar:

  if (this.options.hideOverflow) styles = $extend(styles, {overflow: 'hidden', position: "relative" });
*/
var panels = [];

function init()
{
  panels["searchpanel"] = { element: document.getElementById('searchpanel')
                          , visible: false
                          }
}

function togglepanel(event, panelname)
{
  var panel = panels[panelname];

  panel.visible = !panel.visible;

  if (panel.visible)
  {
    panel.element.style.zIndex = 9;
  }
  else
  {
    panel.element.style.zIndex = 0;
  }

  toddDontPropagateEvent(event);
  return false;
}





var threadpanels = [];

function addpanel(elementid, showbydefault)
{
  //console.log('adding '+elementid);

  threadpanels[elementid] = { parent:    null                  // id of the panel from which this panel was opened
                            , child:     null                  // id of the panel which was opened from this panel
                            , arrownode: null                  // clicked arrow node to activate the child panel
                            , anim:      new Fx.Slide(elementid)
                            , isopen:    showbydefault
                            }

  if (!showbydefault)
    threadpanels[elementid].anim.hide();
}

function openpanel(event, showpanelid, clickednode)
{
  //toddDontPropagateEvent(event);

  var panelnode = document.getElementById(showpanelid);
  if (!panelnode)
  {
    alert("Panel "+showpanelid+" does not exist.");
    return;
  }

  // don't do anything if the panel is already opened
  if (threadpanels[showpanelid] && threadpanels[showpanelid].isopen)
  {
    //console.log(showpanelid+" is already open.");
    closepanel(showpanelid);

    return;
  }

  var target = toddGetEventTarget(event);

  var arrow;
  if (clickednode)
    arrow = getElementsByClassName("arrowinactive", "div", clickednode);
  else
    arrow = getElementsByClassName("arrowinactive", "div", target.parentNode.parentNode);

  if (arrow)
  {
    var arrownode = arrow[0];
    arrownode.className = "arrowactive";
  }

  // lookup the id of the content_block whe are in
  var node = target;
  var parentpanelid = null;
  //console.group();
  while (node)
  {
    //console.log(node.className);
    var classname = node.className;
    if (classname && classname.indexOf("content_block") > -1)
    {
      parentpanelid = node.id;
      break;
    }
    node = node.parentNode;
  }

  //console.groupEnd();
  if (!parentpanelid)
  {
    console.error("panel must have an id",node);
    return;
  }

  if (!threadpanels[showpanelid])
  {
    addpanel(showpanelid, false);
  }

  if (!threadpanels[parentpanelid])
  {
    addpanel(parentpanelid, true);
  }

  if (threadpanels[parentpanelid].child != "")
  {
    if (threadpanels[parentpanelid].arrownode) // fixme
      threadpanels[parentpanelid].arrownode.className = "arrowinactive";

    // close previously opened child
    closepanel(threadpanels[parentpanelid].child);
  }

  threadpanels[parentpanelid].child = showpanelid;
  threadpanels[parentpanelid].arrownode = arrownode;

  // now set information on the panel which we are about to open
  var panel = threadpanels[showpanelid];
  panel.parent = parentpanelid;
  panel.isopen = true;

  //console.log("Sliding in panel "+showpanelid);
  panel.anim.cancel(); // cancel, since an slideOut anim might still be running (and interfere with a slideIn)
  panel.anim.slideIn();

  //pagescroller.toElement(showpanelid);


  // Check whether the opened panel is visible.
  // If it's not visible or barely visible, scroll to it
  var parentdim = document.getElementById(parentpanelid).getCoordinates();
  var viewportdim = window.getCoordinates();
  var pagescrolled = window.getScroll();
  //var headerdim = document.getElementById("header").getCoordinates(); <-- fails in IE7 (because fixed positioning?)
  var headerdim = { height: document.getElementById("header").clientHeight };

  var showatleast = 200; // we want to see at least 200 pixels (panel header and some content)
  var gap = 40;

  // we assume the newly opened panel is below the parent panel
  // calc the approximate position of the panel (after other opened panels have collapsed)
  var panel_y = parentdim.bottom + gap;

  var paneldistancetoviewporttop = panel_y - pagescrolled.y;

  // calculate the height of the part that will be visible after all collapsing and expanding animations are done
  var visibleheightofpanel = viewportdim.height - paneldistancetoviewporttop;

  /*
  console.log({ parentdim:                  parentdim
              , viewportdim:                viewportdim
              , pagescrolled:               pagescrolled
              , headerdim:                  headerdim
              , panel_y:                    panel_y
              , paneldistancetoviewporttop: paneldistancetoviewporttop
              , visibleheightofpanel:       visibleheightofpanel
              });
  */

  // scroll so the top of the opened panel will be in the middle of the contentview (browserwindow viewport minus header)
  if (visibleheightofpanel < showatleast)
    pagescroller.start(0, panel_y - (viewportdim.height-headerdim.height)/2 - headerdim.height);
}

function closepanel(elementid)
{
  var elemid = elementid;

  while(elemid)
  {
    if (elemid)
    {
      var panel = threadpanels[elemid];

      var parentpanel = threadpanels[panel.parent];
      if (parentpanel)
      {
        if (parentpanel.arrownode)
          parentpanel.arrownode.className = "arrowinactive";
        parentpanel.child = ""; // no open child anymore
      }

      //console.log("Sliding out panel "+panel.anim.element.id);

      panel.anim.cancel(); // cancel, since an slideOut anim might still be running (and interfere with a slideIn)
      panel.anim.slideOut();
      panel.isopen = false;
    }

    elemid = threadpanels[elemid].child;
  }
}



window.addEvent('domready', function() {
  window.pagescroller = new Fx.Scroll(window);

  new Fx.SmoothScroll({ duration: 200 },window);

  if (document.getElementsByClassName)
    var subpanels = document.getElementsByClassName("subpanel");
  else
    var subpanels = getElementsByClassName("subpanel","div",document);

  for(var tel=0; tel<subpanels.length; tel++)
  {
    //console.log(subpanels[tel]);
    addpanel(subpanels[tel].id, false);
  }
});

function fixAssortiment()
{
  $(".content_top_assortiment").css("background-position", "0 -85px");
  $(".content_top_fun").css("background-position", "0 0");
  $(".content_top_perdixbrand").css("background-position", "0 0");
  $(".content_top_contact").css("background-position", "0 0");
  $("#homeblock").removeClass("homecontainer_selected");
  $("#homeblock").addClass("homecontainer_notselected");
}

function fixFun()
{
  $(".content_top_fun").css("background-position", "0 -85px");
  $(".content_top_assortiment").css("background-position", "0 0");
  $(".content_top_perdixbrand").css("background-position", "0 0");
  $(".content_top_contact").css("background-position", "0 0");
  $("#homeblock").removeClass("homecontainer_selected");
}

function fixGameAction()
{
  $(".content_top_action").css("background-position", "0 -85px");
  $(".content_top_actioncode").css("background-position", "0 0");
  $(".content_top_game").css("background-position", "0 0px");
}

function fixActioncode()
{
  $(".content_top_action").css("background-position", "0 0");
  $(".content_top_actioncode").css("background-position", "0 -85px");
  $(".content_top_game").css("background-position", "0 0px");
}

function fixGame()
{
  $(".content_top_action").css("background-position", "0 0");
  $(".content_top_actioncode").css("background-position", "0 -85px");
  $(".content_top_game").css("background-position", "0 -85px");
}

function fixPerdixbrand()
{
  $(".content_top_perdixbrand").css("background-position", "0 -85px");
  $(".content_top_assortiment").css("background-position", "0 0");
  $(".content_top_fun").css("background-position", "0 0");
  $(".content_top_contact").css("background-position", "0 0");
  $("#homeblock").removeClass("homecontainer_selected");
  $("#homeblock").addClass("homecontainer_notselected");
}

function fixContact()
{
  $(".content_top_contact").css("background-position", "0 -85px");
  $(".content_top_assortiment").css("background-position", "0 0");
  $(".content_top_perdixbrand").css("background-position", "0 0");
  $(".content_top_fun").css("background-position", "0 0");
  $("#homeblock").removeClass("homecontainer_selected");
  $("#homeblock").addClass("homecontainer_notselected");
}

function fixHome()
{
  $(".content_top_contact").css("background-position", "0 0");
  $(".content_top_assortiment").css("background-position", "0 0");
  $(".content_top_perdixbrand").css("background-position", "0 0");
  $(".content_top_fun").css("background-position", "0 0");
  $("#homeblock").addClass("homecontainer_selected");
  $("#homeblock").removeClass("homecontainer_notselected");
}

function goForeward()
{
  $(".headcontent").css("display", "none");
  $(".hiddenproducts").css("display", "inline-block");
  $(".btn_foreward").css("display", "none");
  $(".btn_back").css("display", "block");
}

function goBack()
{
  $(".headcontent").css("display", "inline-block");
  $(".hiddenproducts").css("display", "none");
  $(".btn_foreward").css("display", "block");
  $(".btn_back").css("display", "none");
}

function fixProductScale(id)
{
  $("#" + id).removeClass("originalImageSize");
  $("#" + id).addClass("activeImageSize");
}

function fixProductResize(id)
{
  $("#" + id).removeClass("activeImageSize");
  $("#" + id).addClass("originalImageSize");
}

/*$(document).ready(function() {
  var scroller = new itemsscroller( document.getElementById("headcontent")
                                  , document.getElementById("btn_back")
                                  , document.getElementById("btn_foreward")
 );
});*/


window.addEvent('domready', function() {
      var scroller = new itemsscroller( document.getElementById("headcontent")
                                      , document.getElementById("allproducts")
                                      , document.getElementById("btn_back")
                                      , document.getElementById("btn_foreward")
      );
});


function itemsscroller(container, scrollelement, arrowleft, arrowright)
{
 this.container  = container;
 this.arrowleft  = arrowleft;
 this.arrowright = arrowright;

 var self = this;
 this.scrollelement = scrollelement;

 if (this.scrollelement && this.arrowleft)
 {
   this.scrollelement.style.position = "absolute"
   this.scrollelement.style.left = "0px"

   this.arrowleft.onclick = function() { self.scrolltoleft(); }
   this.arrowright.onclick = function() { self.scrolltoright(); }
   this.scrollspeed = this.container.offsetWidth;
   this.scrollfx = new Fx.Tween(this.scrollelement, {property:"left", duration:750});

   this.updatearrows();
 }
}

itemsscroller.prototype.updatearrows = function(scrollx)
{
  if (typeof scrollx == "undefined")
    scrollx = -parseInt(this.scrollelement.style.left);

  var viewportwidth = this.container.clientWidth;
  var itemswidth = this.scrollelement.offsetWidth;
  var zichtbaarrechts = this.scrollelement.offsetWidth - viewportwidth - scrollx;
  this.arrowleft.style.display = scrollx > 0 ? "block" : "none";
  this.arrowright.style.display = zichtbaarrechts > 0 ? "block" : "none";
}

itemsscroller.prototype.scrolltoright = function()
{
  var scrollx = -parseInt(this.scrollelement.style.left);
  var newscrollx = scrollx + this.scrollspeed;

  var viewportwidth = this.container.clientWidth;
  var itemswidth = this.scrollelement.offsetWidth;
  var scrollxmax = itemswidth - viewportwidth;
  /*
  console.log({scrollelementleft: this.scrollelement.style.left
              , scrollspeed: this.scrollspeed
              , newscrollx:  newscrollx
              , scrollxmax: scrollxmax
              }
             );
  */
  if (newscrollx > scrollxmax)
    newscrollx = scrollxmax

  this.scrollfx.start(-scrollx, -newscrollx);
  this.updatearrows(newscrollx);
}

itemsscroller.prototype.scrolltoleft = function()
{
 var scrollx = parseInt(this.scrollelement.style.left);
 var newscrollx = -scrollx - this.scrollspeed;

 if (newscrollx < 0)
   newscrollx = 0;

 this.scrollfx.start(scrollx, -newscrollx);
 this.updatearrows(newscrollx);
}