var WorkBrowser = Class.create({
  
  initialize: function(t, r, l) {
    this.imageList = new Array();
    this.captionList = new Array();
    this.target = t;
    this.currentImage=0;
    this.rule = r;
    
    if(l>1) {
      this.target.observe('click', this.nextImage.bindAsEventListener(this));
      this.target.observe('load', this._finishLoading.bindAsEventListener(this));
      this.target.observe('mouseover', this._overImage.bindAsEventListener(this));
    }
    
    var rmatch = $$(this.rule);
    for(i=0; i<rmatch.length; i++) {
      rmatch[i].observe('click', this.jumpImage.bindAsEventListener(this, i));
    }
    
  },
  
  registerImage: function(url) {
	this.imageList.push(url);
  },

   registerCaption: function(caption) {
	this.captionList.push(caption);
	},

  loadImage:function(url) {
    this._startLoading();
	this.target.src = url;
	this.setBorder(url);
	$('splash-caption').update(this.captionList[this.currentImage]);
    },

	setBorder:function(url) {
  	if(url.include('_b')){
		this.target.addClassName('border');
	} else {
		this.target.removeClassName('border');
	}
  },
  
  nextImage: function() {
    this.currentImage++;

    if(this.currentImage == this.imageList.length) {
      this.currentImage = 0;
    }
    this.loadImage(this.imageList[this.currentImage]);
    this._updateDOMState();
  },
  
  jumpImage: function() {
    var i = arguments[1];
    if(i >= this.imageList.length) {
      i = 0;
    }
    
    this.currentImage = i;
    this.loadImage(this.imageList[this.currentImage]);
	this._updateDOMState();
    
    arguments[0].target.blur();
  },
  
  _overImage: function() {
    this.target.setStyle({cursor: 'pointer'});
  },
  
  _startLoading:function() {
    this.target.setOpacity(0.5);
    $$(this.rule)[this.currentImage].addClassName('loading');
  },
  
  _finishLoading:function() {
    this.target.setOpacity(0.99);
	var rmatch = $$(this.rule);
    for(i=0; i<rmatch.length; i++) {
      rmatch[i].removeClassName('loading');
    }
  },
  
  _updateDOMState: function() {
    var rmatch = $$(this.rule);
    for(i=0; i<rmatch.length; i++) {
      rmatch[i].removeClassName('selected');
      if(i == this.currentImage) {
        rmatch[i].addClassName('selected');
      }
    }
  }
  
});

var wb;

// MEDIABROWSER

var MediaBrowser = Class.create({
  
  initialize: function(t, r, l) {
    this.mediaList = new Array();
    this.captionList = new Array();
    this.target = t;
    this.currentMedia=0;
    this.rule = r;
    
    if(l>1) {
      //this.target.observe('click', this.nextMedia.bindAsEventListener(this));
      //this.target.observe('mouseover', this._overMedia.bindAsEventListener(this));
    }
    
    var rmatch = $$(this.rule);
    for(i=0; i<rmatch.length; i++) {
      rmatch[i].observe('click', this.jumpMedia.bindAsEventListener(this, i));
    }
  },
  
  registerMedia: function(html) {
	this.mediaList.push(html);
  },

   registerCaption: function(caption) {
	this.captionList.push(caption);
	},

  loadMedia:function(html) {
	$('media-content').update(unescape(this.mediaList[this.currentMedia]));
    $('splash-caption').update(this.captionList[this.currentMedia]);
    this._updateDOMState();
    },

  nextMedia: function() {
    this.currentMedia++;

    if(this.currentMedia == this.mediaList.length) {
      this.currentMedia = 0;
    }
    this.loadMedia(this.mediaList[this.currentMedia]);
    this._updateDOMState();
  },
  
  jumpMedia: function() {
    var i = arguments[1];
    if(i >= this.mediaList.length) {
      i = 0;
    }
    
    this.currentMedia = i;
    this.loadMedia(this.mediaList[this.currentMedia]);
	this._updateDOMState();
    
    arguments[0].target.blur();
  },
  
  _overMedia: function() {
    this.target.setStyle({cursor: 'pointer'});
  },
  
  _updateDOMState: function() {
    var rmatch = $$(this.rule);
    for(i=0; i<rmatch.length; i++) {
      rmatch[i].removeClassName('selected');
      if(i == this.currentMedia) {
        rmatch[i].addClassName('selected');
      }
    }
  }
  
});

var mb;

Event.observe(document, 'dom:loaded', function() {
	if(typeof(workList) != "undefined") {
	    mb = new MediaBrowser($('media-content'), '#info ul li a', workList.length);
		    for(i=0;i<workList.length; i++) {
		    	mb.registerMedia(workList[i]);
				mb.registerCaption(infoList[i]);
			}
	}
	if(typeof(photoList) != "undefined") {
		wb = new WorkBrowser($('splash-image'), '#info ul li a', photoList.length);
	    	for(i=0;i<photoList.length; i++) {
	       		wb.registerImage(photoList[i]);
	   			wb.registerCaption(infoList[i]);
	   	}
		if(photoList[0].include('_b')){
	   		wb.setBorder(photoList[0]);
	   	}
	}
});