var abraSlider = new Class({

	Implements: [Events, Options],

	options: {
		showTitle: true,
		showDesc: true,
		showLink: true,
		autoScroll: true,
		allowLoop: true,
		duration: 4000,
		transitionDuration: 1000,
		thumbFrameWidth: 4,
		thumbFrameBorderColor: '#971B1E',
		transitionEffect: {'opacity':[0,1]}
		// example transition effects:
		/*
		transitionEffect: {'opacity':[0,1],'left':[-511,0]} // slides in from left
		transitionEffect: {'opacity':[0,1],'top':[-252,0]}  // slides in from top
		transitionEffect: {'opacity':[0,1],'left':[-511,0],'top':[-252,0]} // slides in diag from top left
		*/
	},

	initialize: function(element, options){
	
		$$(element).each(function(item, index) {
			// init Fx engines
			this.FxA = false;
			this.FxB = false;
			this.FxC = false;
			
			gc = item.getCoordinates();
			this.options.frameOffset = (0 - gc['top'] + (this.options.thumbFrameWidth * 2));
			
			this.gui = item;
			this.container = new Element('div').setProperty('class','photoContainer').inject(item);
			this.elements = item.getElements('li');
			if (!this.elements.length) {
			  alert("Error: no slider elements detected for parent element: "+item.id);
			}
			else {
			  liH = this.elements[0].getStyle('height').toInt();
			  liW = this.elements[0].getStyle('width').toInt();
			  if (!liH) {
			    alert("Error: please declare a height in CSS for the <li> element in this array: "+item.id);
			  }
			  else {
			    this.slider = item.getElements('ul')[0];
			    if (this.slider) {
			    
			      this.slider.setStyle('position','relative'); // must be relative!
			    
			      this.sliderContainer = new Element('div').setStyles({
			      'position':'absolute',
			      'top':0,
			      'right':0
			      });
			      
			      this.slider.inject(this.sliderContainer);
			      this.sliderContainer.inject(item);
			      
			      this.sliderHeight = (liH * this.elements.length);
			      
			      this.slider.setStyles({
				  'position':'relative',
			      'top': 0,
			      'left': 0,
			      'height': this.sliderHeight+'px'
			      });
			      
			      this.thumbFrame = new Element('div')
			      .setProperty('class','thumbFrame')
			      .setStyles({
			      'position': 'absolute',
			      'border': this.options.thumbFrameWidth+'px solid '+this.options.thumbFrameBorderColor,
			      'right': 0,
			      'top': '-'+(liH)+'px',
			      'width': (liW - (this.options.thumbFrameWidth * 2))+'px',
			      'height': (liH - (this.options.thumbFrameWidth * 2))+'px'
			      }).inject(this.sliderContainer);
			      
			    }
			  }
			  
			  elementLinks = new Array();
			  elementTargets = new Array();
			  
			  i = 0;
			  this.elements.each(function(elem){ // remove HREF functions / store in array
			    elem.getElements('a').each(function(elema){ // should only be one
			      elementLinks[i] = elema.href;
			      elementTargets[i] = elema.target;
			      elema.removeProperty('href');
			      elema.removeProperty('target');
			    });
			    elem.setProperty('rel',i)
			    .setStyle('cursor','pointer')
			    .addEvent('mouseover',function(){
			    	this.setStyle('opacity',0.5);
			    })
			    .addEvent('mouseout',function(){
			    	this.setStyle('opacity',1);
			    });
			    i++;
			  });
			  
			  $each(this.elements, function(el){
				el.onclick = this.click.pass(el, this);
			  }, this);
			  
			  this.elementLinks = elementLinks;
			  this.elementTargets = elementTargets;
			  
			  this.scrollUp = new Element('div').setProperty('class','scrollUp')
			    .setStyles({'opacity':0.3})
			  	.addEvent('mouseover',function(){ this.setStyles({'opacity':0.7}); })
			  	.addEvent('mouseout',function(){ this.setStyles({'opacity':0.3}); })
			  	.inject(item);
			  	
			  this.scrollDown = new Element('div').setProperty('class','scrollDown')
			    .setStyles({'opacity':0.3})
			  	.addEvent('mouseover',function(){ this.setStyles({'opacity':0.7}); })
			  	.addEvent('mouseout',function(){ this.setStyles({'opacity':0.3}); })
			  	.inject(item);
			  
			  this.scrollUp.addEvent('click', this.doScrollUp.pass(this,this), this);
			  this.scrollDown.addEvent('click', this.doScrollDown.pass(this,this), this);
			  
			  item.addEvent('mouseover',this.hoverOver.pass(item,this), this);
			  item.addEvent('mouseout', this.hoverOut.pass(item,this), this);
			  
			  this.scrollUp.setStyle('visibility','hidden');
			  this.scrollDown.setStyle('visibility','hidden');
			  
			  this.currentElem = 0;
			  this.runLoop = true;
			  this.advLoop();
			}
		}.bind(this));
	},
	hoverOver: function() {
	  this.scrollUp.setStyle('visibility','visible');
	  this.scrollDown.setStyle('visibility','visible');
	  this.runLoop = false;
	  clearTimeout(this.timer);
	},
	hoverOut: function() {
	  this.scrollUp.setStyle('visibility','hidden');
	  this.scrollDown.setStyle('visibility','hidden');
	  this.runLoop = true;
	  clearTimeout(this.timer);
	  this.timer = this.advLoop.delay(this.options.duration, this);
	},
	doScrollUp: function() {
//	  if (this.FxC) { this.FxC.cancel(); }
	  refH = (this.thumbFrame.getStyle('height').toInt() + (this.options.thumbFrameWidth * 2));
	  curTop = this.sliderContainer.getStyle('top').toInt();
	  newTop = (curTop + refH);
	  if (newTop > 0) { newTop = 0; }
      this.FxC = new Fx.Styles(this.sliderContainer).start({'top':[curTop,newTop]});
	},
	doScrollDown: function() {
//	  if (this.FxC) { this.FxC.cancel(); }
	  refH = (this.thumbFrame.getStyle('height').toInt() + (this.options.thumbFrameWidth * 2));
	  curTop = this.sliderContainer.getStyle('top').toInt();
	  newTop = (curTop - refH);
	  gc = this.elements[ (this.elements.length - 1) ].getCoordinates();
	  lastH = gc['top'];
	  if (lastH > this.gui.getStyle('height').toInt()) {
        this.FxC = new Fx.Styles(this.sliderContainer).start({'top':[curTop,newTop]});
	  }
	},
	click: function(elem) {
	  clearTimeout(this.timer);
	  this.currentElem = elem.getProperty('rel').toInt();
	  this.showPhoto(this.currentElem);
	  this.timer = this.advLoop.delay(this.options.duration, this);
	},
	advLoop: function() {
		if (this.runLoop) {
		  if (this.currentElem >= this.elements.length) {
		    if (this.options.allowLoop) {
		      this.currentElem = 0;
		    }
		    else {
		      this.runLoop = false;
		    }
		  }
		  if (this.runLoop) {
		    this.showPhoto(this.currentElem);
		    this.currentElem++;
		    if (this.options.autoScroll) {
	          this.timer = this.advLoop.delay(this.options.duration, this);
	        }
	      }
	      else { clearTimeout(this.timer); }
	    }
	    else { clearTimeout(this.timer); }
	},
	showPhoto: function(i) {
		this.element = this.elements[i];
		if (this.element) {
		  this.frameThumb(i);
		  this.image = this.element.getElements('img')[0];
	  	  this.image_thumb = this.image.getProperty('src');
		  this.image_gui = this.image.getProperty('rel');
		  this.image_title = this.image.getProperty('title');
		  this.image_desc = this.image.getProperty('alt');
		  newPhoto = new Element('div').setStyles({'position':'absolute','top':0,'left':0,'opacity':0});
		  newPhotoCont = new Element('div').setStyles({'position':'relative'});
		  newPhotoImg = new Element('img').setProperty('src',this.image_gui);
		  if ((this.options.showLink) && (this.elementLinks[i] != '')) {
		    newPhotoLink = new Element('a').setProperty('href',this.elementLinks[i]);
		    if (this.elementTargets[i] != '') {
		      newPhotoLink.setProperty('target',this.elementTargets[i]);
		    }
		    newPhotoImg.inject(newPhotoLink);
		    newPhotoImg = newPhotoLink;
		  }
		  newPhotoImg.inject(newPhotoCont);
		  if ( ((this.options.showTitle) && (this.image_title != '')) || ((this.options.showDesc) && (this.image_desc != '')) ) {
		    txtCont = new Element('div').setProperty('class','txtCont');
		    if ((this.options.showTitle) && (this.image_title != '')) { new Element('div').setProperty('class','imageTitle').setHTML(this.image_title).inject(txtCont); }
		    if ((this.options.showDesc) && (this.image_desc != '')) { new Element('div').setProperty('class','imageDesc').setHTML(this.image_desc).inject(txtCont); }
			// add-hoc shadow effect
		    txtCont.clone().setStyles({'left':'0', 'bottom':'1px', 'color':'#000', 'opacity':0.5}).inject(newPhotoCont);
		    txtCont.clone().setStyles({'left':'1px', 'bottom':'0', 'color':'#000', 'opacity':0.5}).inject(newPhotoCont);
		    txtCont.clone().setStyles({'left':'0', 'bottom':'-1px', 'color':'#000', 'opacity':0.5}).inject(newPhotoCont);
		    txtCont.clone().setStyles({'left':'-1px', 'bottom':'0', 'color':'#000', 'opacity':0.5}).inject(newPhotoCont);
		    txtCont.inject(newPhotoCont);
		  }
		  newPhotoCont.inject(newPhoto);
		  if (this.currentPhoto) {
		    newPhoto.inject(this.currentPhoto,'after');
		  }
		  else {
		    newPhoto.inject(this.container);
		  }
//		  if (this.FxA) { this.FxA.cancel(); }
		  this.FxA = new Fx.Styles(newPhoto, {duration: this.options.transitionDuration}).start(this.options.transitionEffect);
		  if (this.currentPhoto) {
		    oldPhoto = this.currentPhoto;
		    (function(){
		      oldPhoto.remove();
			}).delay(this.options.transitionDuration);
		  }
		  this.currentPhoto = newPhoto;
		}
		else {
		  alert("Error: element index ["+i+"] does not exist.");
		}
	},
	frameThumb: function(i) {
		if ((this.slider) && (this.thumbFrame)) {

		  viewMin = this.sliderContainer.getStyle('top').toInt();
		  viewMax = (viewMin + this.gui.getStyle('height').toInt());
		
		  curTop = this.thumbFrame.getStyle('top').toInt();
		  gc = this.elements[i].getCoordinates();
	      trgTop = (gc['top'] - (this.options.thumbFrameWidth * 2) - viewMin);
	      
//   		  if (this.FxB) { this.FxB.cancel(); }
		  this.FxB = new Fx.Styles(this.thumbFrame, {duration: 500}).start({'top':[curTop,(trgTop + this.options.frameOffset)]});

		  if (!i && viewMin) { // reset to 0
//		    if (this.FxC) { this.FxC.cancel(); }
		    this.FxC = new Fx.Styles(this.sliderContainer, {duration: 500}).start({'top':[viewMin,0]});
		  }
		  else {
		    if ((trgTop + this.options.frameOffset) >= viewMax) {
		      if (viewMin > 0) {
		        adjCnt = 0;
		      }
		      else {
		        refH = (this.thumbFrame.getStyle('height').toInt() + (this.options.thumbFrameWidth * 2));
		        adjCnt = (0 - ((refH * i) - refH) + refH);
		      }
		      new Fx.Styles(this.sliderContainer, {duration: 500}).start({'top':[viewMin,adjCnt]});
		    }
		  }

		}
	}
});