function dummy() {
}

var UI = Class.create();

UI.prototype = {
  initialize: function(catInit, projInit, pageInit) {
    this.catInit = unescape(catInit);
    if(projInit) this.projInit = parseInt(projInit);
    if(pageInit) this.pageInit = parseInt(pageInit);
    Event.observe(window, 'load', this.createPortfolio.bind(this));
  },

  images: new Object(),
  mainContainer: "main.container",
  statusFrame: "status.frame",
  mainFrame: "main.frame",
  menu: "menu",
  menuLabel: "menu.label",
  photoScroller: "photo.scroller",
  projectScroller: "photo.scroller",
  photoPreview: "photo.preview",
  portfolio: null,
  firstLoad: true,
  appearDuration: 0.5,
  fadeDuration: 0.5,
  slideShowActive: false,

  createPortfolio: function() {
    this.portfolio = new Portfolio(this);
    this.portfolio.load("xml/portfolio.xml");
  },

  getPortfolio: function() {
    return this.portfolio;
  },

  initUI: function() {
    this.createMenu();
    Effect.Appear("main.container", { duration: 0.5, afterFinish: function() {
      if(this.catInit) {
        this.currentCategory = this.catInit;
        this.setCurrentCategory(this.catInit);
        var cat = this.getPortfolio().currentCategory;
        if(this.projInit && this.projInit <= cat.projects.length) {
          cat.page = this.projInit;
          var project = cat.projects[cat.page-1];
          if(this.pageInit && this.pageInit <= project.photos.length) {
            project.currentPhoto = project.photos[this.pageInit-1];
            this.pageInit = null;
          }
          else {
            project.currentPhoto = project.photos[0];
          }
          this.projInit = null;
        }
        else {
          cat.page = 1;
        }
        this.loadCatagory();
        this.catInit = null;
      }
      else {
        this.showPanels();
      }
    }.bind(this)});
  },

  setIndicator: function(anchor) {
    if(!anchor) {
      var name = ui.getPortfolio().currentCategory.name;
      anchor = $(name);
    }
    var top = anchor.offsetTop;
    var height = anchor.offsetHeight;
    Element.setStyle('indicator', {left: '5px', top: (top + 18) + 'px'});
    Effect.Appear('indicator', {duration: 0.5});
  },

  showPanels: function() {
    var phased = false;
    $("photoContainer").innerHTML = "";
    Effect.Appear("main.container", { duration: 0.5, afterFinish: function() {
      new Effect.Move("controls", { x: 0, y: 165, duration: 0.3, afterFinish: function() {
          new Effect.Move("controls", { x: 0, y: -25, duration: 0.2, afterFinish: function() {
              Effect.PhaseIn("menu.container", {duration: 0.3, afterFinish: function() {
                if(!phased) {
                  phased = true;
                  ui.showCategoryInfo();
                  ui.setIndicator();
                }
              }});
            }
          });
        }
      });
    }});
  },

  hidePanels: function() {
    Effect.Fade('current.menu.item', {duration: 0.3});
    Effect.Fade('indicator', {duration: 0.3});
    var phased = false;
    Effect.Fade('thumbnail', {duration: 0.3, afterFinish: function() {
      Effect.PhaseOut("menu.container", {duration: 0.3, afterFinish: function() {
        if(!phased) {
          phased = true;
          new Effect.Move("controls", { x: 0, y: -140, duration: 0.3, afterFinish: function() {
            ui.loadCatagory();
          }});
        }
      }});
    }.bind(this)});
  },

  toggleContactMe: function() {
    if (Element.getStyle("contactContainer", "visibility") == 'hidden') {
      var height = $("contactContainer").offsetHeight + 10;
      $("contactContainer").style.top = (500 - height);
      Element.setStyle("contactContainer", {
        display: 'none',
        top: (500 - height) + 'px',
        visibility: 'visible'
      });
      Element.setStyle("contactData", {display: 'none'});
    }

    var phased = false;

    if (Element.getStyle("contactContainer", "display") == 'none')
      Effect.Appear("contactContainer", {duration: 0.3, afterFinish: function() {
        Effect.PhaseIn("contactData", {duration: 0.3});
      }});
    else
      Effect.PhaseOut("contactData", {duration: 0.3, afterFinish: function() {
        if(!phased) {
          phased = true;
          Effect.Fade("contactContainer", {duration: 0.3});
        }
      }});
  },

  setCurrentCategory: function(cat) {
    if(this.currentCategory == cat) {
      ui.getPortfolio().currentCategory = this.getPortfolio().categories[cat];
      this.showCategoryInfo();
    }
  },

  showCategoryInfo: function() {
    var name = this.getPortfolio().currentCategory.name;
    $('current.menu.item').innerHTML = name;
    var img = this.getPortfolio().currentCategory.thumbnail.getImage();
    $('thumbnail').src = img.src;
    //this.appearing = true;
    Effect.Appear('current.menu.item', {duration: 0.8});
    Effect.Appear('thumbnail', {duration: 0.8, afterFinish: function() {
      this.appearing = false;
    }.bind(this)});
  },

//#############################################################################################
//Main Menu Methods
//#############################################################################################

  createMenu: function() {
    var mousedown = 'ui.menuItemPressed(this)';
    var mouseover = 'ui.menuItemHover(this)';
    var mouseout = 'ui.menuItemNormal(this)';
    var mouseup = 'ui.menuItemUp(this)';
    var content = '';
    var categories = this.getPortfolio().categories;
    for (var i in categories) {
      var cat = categories[i];
      content += '<div id="'+cat.name+'" class="menuItem" style="text-align: right;"><span category="' + cat.name + '" onmouseover="' + mouseover + '" onmouseout="' + mouseout + '" onmousedown="' + mousedown + '" onmouseup="' + mouseup + '" >' +
                 cat.name +
                 '</span></div>';
    }
    new Insertion.Top('menu.container', content);
  },

  menuItemHover: function(elt) {
    if(!this.appearing) {
      this.setIndicator(elt.parentNode);
      Element.setStyle(elt, {color: '#444444'});
      var cat = elt.getAttribute('category');

      if(cat != ui.getPortfolio().currentCategory.name) {
        if(!this.isFadeing) {
          this.isFadeing = true;
          Effect.Fade('current.menu.item', {duration: 0.5, afterFinish: function() {
            Element.setStyle('current.menu.item', {display: "none"});
          }.bind(this)});
          Effect.Fade('thumbnail', {duration: 0.5, afterFinish: function() {
            this.isFadeing = false;
            Element.setStyle('thumbnail', {display: "none"});
          }.bind(this)});
        }
        this.currentCategory = cat;
        setTimeout("ui.setCurrentCategory('"+cat+"');", 500);
      }
    }
  },

  menuItemNormal: function(elt) {
    Element.setStyle(elt, {color: '#78736B'});
  },

  menuItemPressed: function(elt) {
  },

  menuItemUp: function(elt) {
    this.menuItemNormal(elt);
    this.hidePanels();
  },


//#############################################################################################
//Catagory Display Methods.
//#############################################################################################
  loadCatagory: function() {
    this.createProjectPager();
    this.loadProject();
    Effect.Appear('categoryViewer', {duration: 0.5, afterFinish: function() {Effect.PhaseIn('infoContainer', {duration: 0.3})}});
    Effect.Appear('mainMenuLink', {duration: 0.5});
  },

  hideCatagory: function() {
    var phased = false;
    Effect.PhaseOut('infoContainer', {duration: 0.3, afterFinish: function() {
      if(!phased) {
        phased = true;
        Effect.Fade('categoryViewer', {duration: 0.5});
        Effect.Fade('mainMenuLink', {duration: 0.5});
        Effect.Fade('photo.img', {duration: 0.5, afterFinish: function() {
          ui.showPanels()
        }});
      }
    }});
  },

//#############################################################################################
//Project Display Methods.
//#############################################################################################
  loadProject: function() {
    this.setProjectInfo();
    this.createPhotoPager();
    this.loadPhoto();
  },

  createProjectPager: function() {
    var cat = ui.getPortfolio().currentCategory;
    var catPage = cat.page;
    var project = cat.projects[catPage-1];
    $('categoryTitle').innerHTML = cat.name;
    if(catPage < 10)
      $('currentPage').innerHTML = '0' + catPage;
    else
      $('currentPage').innerHTML = catPage;

    if(cat.projects.length < 10)
      $('totalPages').innerHTML = '0' + cat.projects.length;
    else
      $('totalPages').innerHTML = cat.projects.length;
  },

  setProjectInfo: function() {
    var project = this.getCurrentProject();

    var location = project.location;
    if(!location || location == '')
      $('locationData').innerHTML = 'not available';
    else
      $('locationData').innerHTML = location;

    var year = project.year;
    if(!year || year == '')
      $('yearData').innerHTML = "not available";
    else
      $('yearData').innerHTML = year;
  },

  moveProjectLeft: function() {
    var cat = this.getPortfolio().currentCategory;
    if(cat.page > 1) {
      cat.page = cat.page - 1;
    }
    else {
      cat.page = cat.projects.length;
    }
    if(cat.page < 10)
      $('currentPage').innerHTML = '0' + cat.page;
    else
      $('currentPage').innerHTML = cat.page;
    this.loadProject();
  },

  moveProjectRight: function() {
    var cat = this.getPortfolio().currentCategory;
    if(cat.page < cat.projects.length) {
      cat.page = cat.page + 1;
    }
    else {
      cat.page = 1;
    }
    if(cat.page < 10)
      $('currentPage').innerHTML = '0' + cat.page;
    else
      $('currentPage').innerHTML = cat.page;
    this.loadProject();
  },

  toggleSlideShow: function() {
    if(!this.slideShowActive) {
      this.slideShowActive = true;
      $('slideControl').src = "images/media-pause.jpg";
      this._runSlideShow();
    }
    else this.stopSlideShow();
  },

  runSlideShow: function() {
    this.slideShowActive = true;
    self.setTimeout('ui._runSlideShow()', 3000);
  },

  _runSlideShow: function() {
    if(this.slideShowActive) {
      this.moveProjectRight();
    }
  },

  stopSlideShow: function() {
    if(this.slideShowActive) {
      this.slideShowActive = false;
      $('slideControl').src = "images/media-play.jpg";
    }
  },

  goToProject: function() {
    var value = parseInt($('goToText').value);
    var cat = this.getPortfolio().currentCategory;
    if(value > cat.projects.length || value < 1) {
      alert('Value is out of range!');
      return;
    }
    cat.page = value;
    if(cat.page < 10)
      $('currentPage').innerHTML = '0' + cat.page;
    else
      $('currentPage').innerHTML = cat.page;
    this.loadProject();
    $('goTo').style.display = "none";
  },

  openGoTo: function() {
    this.stopSlideShow();
    Position.clone("currentPage", "goTo");
    var page = this.getPortfolio().currentCategory.page;
    if(!page || page == '') page = 1;
    $('goToText').value = page;
    $('goTo').style.display = "block";
    $('goToText').select();
    $('goToText').focus();
  },

  getCurrentProject: function() {
    var cat = ui.getPortfolio().currentCategory;
    var catPage = cat.page;
    var project = cat.projects[catPage-1];
    return project;
  },

  addBookmark: function() {
    var name = this.getPortfolio().currentCategory.name;
    name = escape(name);
    var proj = this.getPortfolio().currentCategory.page;
    var page = this.getPortfolio().currentCategory.projects[proj-1].currentPhoto.index + 1;
    $('directURL').innerHTML = "http://stevefreihon.com/index.html?category=" + name + "&project=" + proj + "&page=" + page;
    Position.clone("photoContainer", "infoWindow");
    Effect.Appear("infoWindow", {from: 0, to: 0.9, duration: 0.5});
  },

//#############################################################################################
//Photo Display Methods.
//#############################################################################################
  loadPhoto: function() {
    if($('photo.img') != null) {
      Effect.Fade('photo.img', {duration: 0.5,
        afterFinish: function() {
          $("photoContainer").innerHTML = "";
          if (!this.getCurrentProject().currentPhoto.isloaded) {
            Element.setOpacity("throber", 0.4);
            Element.setStyle("throber", {display: "block"});
          }
          var newImg = document.createElement("img");
          newImg.id = "photo.img";
          Element.setStyle(newImg, {display: 'none', marginLeft: 'auto', marginRight: 'auto'});
          newImg.onload = function() {
            ui.showPhoto(true);
          };
          $("photoContainer").appendChild(newImg);
          newImg.src = this.getCurrentProject().currentPhoto.src;
          this.getCurrentProject().currentPhoto.isloaded = true;
        }.bind(this)});
    }
    else {
      $("photoContainer").innerHTML = "";
      if (!this.getCurrentProject().currentPhoto.isloaded) {
        Element.setOpacity("throber", 0.4);
        Element.setStyle("throber", {display: "block"});
      }
      var newImg = document.createElement("img");
      newImg.id = "photo.img";
      Element.setStyle(newImg, {display: 'none', marginLeft: 'auto', marginRight: 'auto'});
      newImg.onload = function() {
        ui.showPhoto(true);
      };
      $("photoContainer").appendChild(newImg);
      newImg.src = this.getCurrentProject().currentPhoto.src;
      this.getCurrentProject().currentPhoto.isloaded = true;
    }
  },

  showPhoto: function(appear) {
    Element.setStyle("throber", {display: "none"});
    if(appear) {
      Effect.Appear("photo.img", {duration: 0.5,
        afterFinish: function() {
          if(this.slideShowActive) {
            this.runSlideShow();
          }
        }.bind(this)
      });
    }
    else {
      Element.setStyle("photo.img", {display: "block"});
    }
  },

  createPhotoPager: function() {
    var project = this.getCurrentProject();

    var photoPager = $('pagerData');
    var photos = project.photos;
    var pager = '';
    photoPager.innerHTML = '';

    for (var i = 0; i < photos.length; i++) {
      var photo = photos[i];
      if (i == 0) {
        var start = document.createElement("span");
        start.innerHTML = "[";
        photoPager.appendChild(start);
      }
      var span = document.createElement("span");
      span.photo = photo;
      photo.span = span;
      Element.setStyle(span, {cursor: "pointer", paddingLeft: "3px", paddingRight: "3px"});

      span.onmouseover = function() {
        if (ui.getCurrentProject().currentPhoto != this.photo) Element.setStyle(this, {color: "#3d3d3d"});
      }.bind(span);

      span.onmouseout = function() {
        if (ui.getCurrentProject().currentPhoto != this.photo) Element.setStyle(this, {color: "#9d9081"})
      }.bind(span);

      span.onmousedown = function() {
        if (ui.getCurrentProject().currentPhoto != this.photo) Element.setStyle(this, {color: "9d9081"});
      }.bind(span);

      span.onmouseup = function() {
        if (ui.getCurrentProject().currentPhoto != this.photo) {
          ui.getCurrentProject().currentPhoto.span.style.color = "#9d9081";
          ui.getCurrentProject().currentPhoto = this.photo;
          Element.setStyle(this, {color: "#1C54BD"});
          ui.loadPhoto();
        }
      }.bind(span);

      if (photo == this.getCurrentProject().currentPhoto) {
        Element.setStyle(span, {color: "#1C54BD"});
      }

      span.innerHTML = (i + 1);
      photoPager.appendChild(span);
      if (i == (photos.length - 1)) {
        var end = document.createElement("span");
        end.innerHTML = "]";
        Element.setStyle(end, {paddingRight: "10px"});
        photoPager.appendChild(end);
      }
    }
  },

//#############################################################################################
//Image Utilities Methods.
//#############################################################################################

  createRollOver: function(elt, imgId1, imgId2) {
    elt.onmouseover = function() {
      this.setImage(elt, imgId2)
    }.bind(this);
    elt.onmouseout = function() {
      this.setImage(elt, imgId1)
    }.bind(this);
  },

  newImage: function(imgId, imgUrl, imgHeight, imgWidth, dontCheckDoc) {
    var imgObj = null;
    var docImg = null;
    if (!dontCheckDoc) {
      docImg = $(imgId);
    }
    if (imgWidth && imgHeight) {
      //imgObj = new Image(imgWidth,imgHeight);
      imgObj = document.createElement("img");
      Element.setStyle(imgObj, {height: imgHeight + 'px', width: imgWidth + 'px'});
      imgObj.width = imgWidth;
      imgObj.height = imgHeight;
    }
    else {
      //imgObj = new Image();
      imgObj = document.createElement("img");
    }
    imgObj.id = imgObj.name = imgId;
    this.images[imgId] = imgObj;
    //if(!this.images.length) this.images.length = 0;

    //this.images.length++;
    imgObj.src = imgUrl;
    if (!docImg) {
      return imgObj;
    }
    else {
      docImg.src = imgUrl;
      return docImg;
    }
  },

  setImage: function(img1, img2) {
    var img1Obj = null;
    var img2Obj = null;
    if (typeof(img1) == 'string') img1Obj = $(img1);
    else img1Obj = img1;
    if (typeof(img2) == 'string') img2Obj = this.images[img2];
    else img2Obj = img2;
    img1Obj.src = img2Obj.src;
  },

  ensureInitImageLoad: function() {
    var complete = 0;
    var incomplete = 0;
    for (var i in this.images) {
      var image = this.images[i];
      if (image.complete == true) {
        ++complete;
        image.loaded = true;
      }
      else if (image.complete == false) ++incomplete;
    }
    if (incomplete > 0) {
      var p = (complete / (complete + incomplete));
      this.updateStatus("Loading Images", p);
      setTimeout("ui.ensureInitImageLoad()", 200);
    }
    else {
      this.updateStatus("Done", 1);
      setTimeout("ui.hideStatus()", 500);
      return true;
    }
  }
}