/*
*author: James Spencer
*
*The Walkthrough is a node structure consisting of Pages containing Points.
*Each point is a link to a new page or a control for a lightbox-style popup
*
*need loadPage
*/
Walkthrough = function()
{
  var container;
  var moving = false;
  var open = false;
  var currentPage = false;
  var previousPage = false;
  var backButton = {element:undefined,activate:undefined};//tha back button
  var pages = [];
  var pageHistory = [];
  
  //click handler checks the target of each click event against our clickable elements
  function clickHandler(evt)
  {
    if(!currentPage || moving) return;
    var e = evt || window.event;
    var targ = e.target || e.srcElement;
    activePoints = currentPage.getPoints();
    for(x in activePoints)
    {
      if(!open && (targ == activePoints[x].getControlElement().element.lastChild)) return activePoints[x].activate();
    }
    if(backButton.element != undefined && targ == backButton.element) backButton.activate(e);
    if(open && (currentPage.closeInfoWindowElement && targ == currentPage.closeInfoWindowElement)) return currentPage.closeInfoWindow();
  }
  function mouseoverHandler(evt)
  {
    if(!currentPage || moving) return;
    var e = evt || window.event;
    var targ = e.target || e.srcElement;
    if(currentPage.closeInfoWindowElement && targ == currentPage.closeInfoWindowElement) Style.set(currentPage.closeInfoWindowElement,'backgroundPosition','bottom left');
    activePoints = currentPage.getPoints();
    for(x in activePoints)
    {
      if(targ == activePoints[x].getControlElement().element.lastChild) return activePoints[x].getControlElement().open();
    }
  }
  function mouseoutHandler(evt)
  {
    if(!currentPage || moving) return;
    var e = evt || window.event;
    var targ = e.target || e.srcElement;
    if(currentPage.closeInfoWindowElement && targ == currentPage.closeInfoWindowElement) Style.set(currentPage.closeInfoWindowElement,'backgroundPosition','top left');
    activePoints = currentPage.getPoints();
    for(x in activePoints) if(targ == activePoints[x].getControlElement().element.lastChild) return activePoints[x].getControlElement().close();
  }
  //Page object
  function Page(theImage)
  {
    var isLoaded = false;//image has been downloaded
    var points = [];//array of points in the page
    var element;//parent element of this page
    var infoElement = {element:undefined,animation:undefined,open:undefined,closed:undefined};//container element for infowindow
    var closeinfoElement = {element:undefined,animation:undefined,open:undefined,closed:undefined};//close button element for info window
    var maskElement = {element:undefined,animation:undefined,open:undefined,closed:undefined};//the mask, used for tint when infoBox is open and mask between transitions
    var image;
    if(typeof(theImage) == 'string')
    {
      element = document.createElement('div');//page element
      image = document.createElement('img');
      Event.add(image,'load',imageLoaded);
      image.setAttribute('src',theImage);
      image.classname = 'pageImage';
      element.appendChild(image);
      firstPage = false;
    }
    else
    {
      imageLoaded();
      element = theImage.parentNode;
      firstPage = true;
    }
    //Create the info popup element
    infoElement.element = document.createElement('div');
    infoElement.element.className = 'infoBox';
    //Create the close button for info popup
    closeinfoElement.element = document.createElement('div');
    closeinfoElement.element.className = 'closeInfoWindow';
    infoElement.element.appendChild(closeinfoElement.element);
    element.appendChild(infoElement.element);
    infoElement.animation = new YAHOO.util.Anim(infoElement.element, {height: {to: 299}}, 0.5, YAHOO.util.Easing['easeOut']);
    infoElement.open = function()
    {
      Style.set(infoElement.element,'display','block');
      this.animation.animate();
      //console.log('infoElement opening');
    };
    infoElement.close = function()
    {
      Style.set(infoElement.element,'display','none');
      Style.set(infoElement.element,'height','0');
      //alert('infoElement closing');
      //Style.set(infoElement.element.getElementsByTagName('img')[0],'height','0');
      //alert('infoElement closing');
    };
    maskElement.element = document.createElement('div');
    maskElement.element.className = 'walkthroughMask';
    if(firstPage)
    {
      YAHOO.util.Dom.setStyle(maskElement.element,'opacity','0');
      YAHOO.util.Dom.setStyle(maskElement.element,'display','none');
    }
    maskElement.animationSemi = new YAHOO.util.Anim(maskElement.element, {opacity: {to: 0.4}}, 0.5, YAHOO.util.Easing['easeOut']);
    maskElement.animationSemi.onComplete.subscribe(function(){infoElement.open();});
    maskElement.animationFull = new YAHOO.util.Anim(maskElement.element, {opacity: {to: 1}}, 0.3, YAHOO.util.Easing['easeOut']);
    maskElement.animationFull.onComplete.subscribe(function(){replacePages();});
    maskElement.animationClose = new YAHOO.util.Anim(maskElement.element, {opacity: {to: 0}}, 0.3, YAHOO.util.Easing['easeOut']);
    maskElement.animationClose.onComplete.subscribe(function(){Style.set(maskElement.element,'display','none');pulsePoints.pulse();Style.set(maskElement.element,'backgroundColor','#292728');});
    maskElement.open = function(full)
    {
      Style.set(maskElement.element,'display','block');
      if(Style.get(maskElement.element,'background-color') != 'transparent')
      {
        if(full) 
        {
          Style.set(maskElement.element,'backgroundColor','#151515');
          this.animationFull.animate();
        }
        else this.animationSemi.animate();
      }
      else infoElement.open();
      //console.log('mask opening');
    };
    maskElement.close = function(animate)
    {
      if(animate) this.animationClose.animate();
      else
      {
        Style.set(maskElement.element,'display','none');
        YAHOO.util.Dom.setStyle(maskElement.element,'opacity','0');
      }
    };
    element.appendChild(maskElement.element);
    
    function imageLoaded()
    {
      isLoaded = true;
    }
    function addPoint(point)
    {
      points.push(point);
      element.appendChild(point.getControlElement().element);
      if(point.getElement) infoElement.element.appendChild(point.getElement());
    }
    function openInfoWindow()
    {
      open = true;
      //YAHOO.util.Dom.setStyle(maskElement.element,'opacity','0.4');
      //Style.set(maskElement.element,'display','block');
      maskElement.open(false);
      Style.set(infoElement.element,'display','block');
    }
    function closeInfoWindow()
    {
      open = false;
      infoElement.close();
      maskElement.close(false);
      for(x in points){
        if(points[x].getElement && Style.get(points[x].getElement(),'display') == 'block') //get the visible element
        {
          points[x].getElement().parentNode.removeChild(points[x].getElement());//Style.set(points[x].getElement(),'display','none'); <- We remove and recreate the element as IE has bugs if we just hide it
          points[x].newElement();
          infoElement.element.appendChild(points[x].getElement());
        }
        
      }
    }
    return {
      addPoints: function(point){
        if(point.length) for(x in point) addPoint(point[x]);
        else addPoint(point);
      },
      getPoints: function(){
        return points;
      },
      isLoaded: function(){
        return isLoaded;
      },
      getElement: function()
      {
        return element;
      },
      openInfoWindow: function()
      {
        return openInfoWindow();
      },
      closeInfoWindow: function()
      {
        return closeInfoWindow();
      },
      closeInfoWindowElement: closeinfoElement.element,
      getMaskElement: function(){return maskElement;}
    };
  }
  function Point()//Overloaded function - if arg > 5 is infoPoint else is entryPoint for new page
  {
    if(arguments.length == 1) arguments = arguments[0];
    if(arguments.length == 5)//(coords,page,controlText,openRight,bgImage)
    {
      var page = arguments[1];
      var control = new InfoPointControlDOMElement(arguments[2],arguments[4]);
      var fadeOut = new YAHOO.util.Anim(control.element.firstChild, {opacity: {to: 0}}, 0.3, YAHOO.util.Easing['easeIn']);
      var fadeIn = new YAHOO.util.Anim(control.element.firstChild, {opacity: {to: 1}}, 0.3, YAHOO.util.Easing['easeOut']);
      fadeOut.onComplete.subscribe(function(){fadeIn.animate();});
      fadeIn.onComplete.subscribe(function(){pulsePoints.pulseNext();});
      control.element.className = arguments[3] ? 'walkthroughControl' : 'walkthroughControlOpenLeft';
      Style.set(control.element,'top',arguments[0][1]+'px');
      if(arguments[3]) Style.set(control.element,'left',arguments[0][0]+'px');
      else Style.set(control.element,'right',arguments[0][0]+'px');
      return {
        coord: arguments[0],
        getControlElement: function(){return control;},
        page: arguments[1],
        activate: function()
        {
          control.close();
          if(moving || open) return;
          loadThisPage(page,false)
        },
        pulse: function()
        {
          return;
        }
      };
    }
    else if(arguments.length == 10)//(coords,heading,copy,image,linkText,linkURL,controlText,up,left,[width,height])
    {
      var heading = arguments[1];
      var copy = arguments[2];
      var image = arguments[3];
      var linkText = arguments[4];
      var linkURL = arguments[5];
      var element = new InfoPointDOMElement(arguments[1],arguments[2],arguments[3],arguments[4],arguments[5]);
      var control = new InfoPointControlDOMElement(arguments[6],arguments[3],linkURL);//creates div with a link to the target page
      var fadeOut = new YAHOO.util.Anim(control.element.firstChild, {opacity: {to: 0}}, 0.3, YAHOO.util.Easing['easeIn']);
      var fadeIn = new YAHOO.util.Anim(control.element.firstChild, {opacity: {to: 1}}, 0.3, YAHOO.util.Easing['easeOut']);
      fadeOut.onComplete.subscribe(function(){fadeIn.animate();});
      fadeIn.onComplete.subscribe(function(){pulsePoints.pulseNext();});

      controlClassName = 'walkthroughControl';
      controlClassName += arguments[7] ? ' lineUp' : ' lineDown';
      ypos = arguments[7] ? arguments[0][1] - arguments[9][1] : arguments[0][1];
      
      controlClassName += arguments[8] ? ' lineLeft' : ' lineRight';
      xpos = arguments[8] ? arguments[0][0] - arguments[9][0] - 6 : arguments[0][0] + 6;

      element.className = 'infoWindowContent';
      control.element.className = controlClassName;
      
      Style.set(control.element,'top',ypos+'px');
      Style.set(control.element,'left',xpos+'px');
      
      Style.set(control.element,'width',arguments[9][0]+'px');
      Style.set(control.element,'height',arguments[9][1]+'px');
      
      return {
        coord: arguments[0],
        getElement: function(){return element;},
        getControlElement: function(){return control;},
        activate: function()
        {
          if(moving || open) return;
          
          //Style.set(element,'display','block');
          //currentPage.openInfoWindow();
          //control.close();
        },
        pulse: function()
        {
          fadeOut.animate();
        },
        newElement: function()
        {
          element = new InfoPointDOMElement(heading,copy,image,linkText,linkURL);
          element.className = 'infoWindowContent';
        }
      };
    }
  }
  backButton.element = document.createElement('a');
  backButton.element.setAttribute('href','/essentially-Mallory/the-store/');
  backButton.element.appendChild(document.createTextNode('BACK'));
  backButton.element.className='backButton';
  backButton.activate = function(evt)
  {
    if(pageHistory.length > 0 || open)
    {
      Event.cancel(evt);
      if(!open) loadThisPage(pageHistory.pop(),true);
      else currentPage.closeInfoWindow();
    }
  }
  function loadThisPage(page,back)
  {
    //activePoints = currentPage.getPoints();
    //for(x in activePoints) activePoints[x].getControlElement().close();
    previousPage = currentPage;
    newPage = page.getElement();
    if(!back) pageHistory.push(currentPage);
    currentPage = page;
    previousPage.getMaskElement().open(true);
  }
  function replacePages()
  {
    container.replaceChild(currentPage.getElement(),previousPage.getElement());
    currentPage.getMaskElement().close(true);
  }
  function InfoPointControlDOMElement(text,image,linkURL)
  {
    var theElement = document.createElement('div');
    //create container div
    //create circle image
    //create label
    //assign positions or circle and label based on top/bottom left/right
    //position circle over area and set size of div
    theElement.appendChild(document.createElement('img'));
    if(image) theElement.firstChild.setAttribute('src',image);
    else theElement.firstChild.setAttribute('src','/images/icons/walkthroughControlCircle.png');
    theElement.appendChild(document.createElement('div'));
    theElement.lastChild.appendChild(document.createElement('a'));
    theElement.lastChild.lastChild.href = linkURL;
    theElement.lastChild.lastChild.target = '_blank';
    theElement.lastChild.lastChild.appendChild(document.createTextNode(text));
    Style.set(theElement.lastChild.lastChild,'display','block')
    Style.set(theElement.lastChild.lastChild,'textDecoration','none')
    Style.set(theElement.lastChild.lastChild,'color','#000000')
    Event.add(theElement.lastChild.lastChild,'mouseover',function(){Style.set(theElement.lastChild.lastChild,'color','#AE0135')});
    Event.add(theElement.lastChild.lastChild,'mouseout',function(){Style.set(theElement.lastChild.lastChild,'color','#000000')});
    function openMe()
    {
      return;
    }
    function closeMe()
    {
      return;
    }
    return {element:theElement,open:function(){return openMe();},close:function(){return closeMe();}};
  }
  function InfoPointDOMElement(heading,copy,image,linkText,linkURL)
  {
    var theElement = document.createElement('div');
    theElement.innerHTML = '<img src="'+image+'" alt="" /><h4>'+heading+'</h4>'+copy+'<a href="'+linkURL+'">'+linkText+'</a>';
    theElement.classname = 'InfoPoint';
    return theElement;
  }
  pulsePoints = function()
  {
    var activePointsLeft = false;
    function pulseThis(point)
    {
      //point.pulse();
      return;
    }
    return {
      pulse: function()
      {
        activePointsLeft = currentPage.getPoints().slice().reverse();
        if(activePointsLeft && activePointsLeft.length) pulseThis(activePointsLeft.pop());
      },
      pulseNext: function()
      {
        if(activePointsLeft && activePointsLeft.length) pulseThis(activePointsLeft.pop());
      }
    };
  }();

  return {
    init: function(theContainer)
    {
      container = (typeof(theContainer) == 'string') ? Dom.get(theContainer) : theContainer;
      //if the container doesn;t have an image in a div then send em away
      if(container.getElementsByTagName('div').length == 0 || container.getElementsByTagName('div')[0].getElementsByTagName('img').length == 0) return false;
      //Load the first page 
      pages.push(new Page(container.getElementsByTagName('div')[0].getElementsByTagName('img')[0]));
      currentPage = pages[0];
      container.parentNode.appendChild(backButton.element);
      Event.add(container.parentNode,'click',clickHandler);
      Event.add(container.parentNode,'mouseover',mouseoverHandler);
      Event.add(container.parentNode,'mouseout',mouseoutHandler);
      return true;
    },
    addPage: function(image)
    {
      return new Page(image);
    },
    getPage: function(n)
    {
      if(n < pages.length) return pages[n];
    },
    loadPage: function(page)
    {
      loadThisPage(page,false);
    },
    createPoints: function(points)
    {
      var newPoints = [];
      if(points.length) for(x in points) newPoints.push(new Point(points[x]));
      return newPoints;
    },
    start: function()
    {
      pulsePoints.pulse();
    }
  };
}

/*
var Page = {
  image: undefined,
  points: []};

var Point = {
  x: undefined,
  y: undefined,
  page: false,
  content: {
    heading: undefined,
    copy: undefined,
    image: undefined,
    linkText: undefined,
    linkURL: undefined}};

Walkthrough.loadPage = function(n)
{
  if(n.image && && n.points && isArray(n.points)) createPage(n);
  else createPage(pages[n]);
  Image = createImage();
  onImageLoad = openPage(nextPage);
  foreach point
  {
    create infoPoint;
    loadImage();
    onImageLoad add to Page
  }
}
openPage(nextPage)
{
  closePage(currentPage);
  replace currentPage with nextPage;
  currentPage = nextPage;
  updateBack = loadPAge
  fadeIn(currentPage);
}
toggleMask(n)
{
  if(moving) return;
  if(isIn) fadeOutMask()
  else fadeInMask();
}
Point.open()
{
  if(page === false)
  {
    displayPoint();
  }
  else
  {
    Walkthrough.loadPage(page)
  }
}*/