Fx.FadeHoverLink = Fx.Style.extend({
    initialize: function(el, options) {
		options.wait = false;
        this.parent(el, 'opacity', options);
        this.set(0.01);
        this.element.addEvent('mouseover', function() { this.custom(0.01,1); }.bind(this) );
        this.element.addEvent('mouseout', function() { this.custom(1,0.01); }.bind(this) );
    }
});

var panoramaNavigationWidget = new Class({
	options : Object,

	initialize: function(el,options) {
		this.options = Object.extend({
			visiblePanels : 4,
			onComplete: Class.empty
		}, options || {});

		//-- init state
		this.panelPxPos			= 0;
		this.panelCount			= 1;
		this.currentFirstPanel	= 0;
		this.currentLastPanel	= Math.min(Math.ceil(el.length/2) - 1, this.options.visiblePanels - 1);
		this.isMovingLeft		= false;
		this.isMovingRight		= false;
		this.isMoving			= false;

		//-- rebuild DOM
		html  = '';
		html += '<div id="scrollContainer">'+"\n";
		html += '<div class="panel" id="panel0">&nbsp;</div>'+"\n";
		var itemCount;
		$ES('li',el).each( function(item,idx) {
			anchor = $E('a',item);
			html += ((idx % this.options.rows)+1)==1 ? '<div class="panel" id="panel'+(this.panelCount++)+'">'+"\n" : '';
			html += '<a href="javascript:updateGalleryPanel(\''+anchor.rel+'\');" id="'+anchor.rel+'">'+anchor.innerHTML+'</a><br />'+"\n";
			html += ((idx % this.options.rows)+1)==this.options.rows ? '</div>'+"\n" : '';
			itemCount = idx;
		}.bind(this)); // each..li
		html += ((itemCount % this.options.rows)+1)==this.options.rows ? '' : '</div>'+"\n";
		html += '<div class="panel" id="panel'+(this.panelCount++)+'"></div>'+"\n";
		html += '<div class="panel" id="panel'+(this.panelCount++)+'"></div>'+"\n"; //-- kind of a cheap hack...  might be one more than we really need for most cases...
		html += '</div>'+"\n";
		html += '<div id="leftHoverControl"><img src="/_media/images/common/spacer.gif" width="145" height="45" border="0" /></div>'+"\n";
		html += '<div id="rightHoverControl"><img src="/_media/images/common/spacer.gif" width="145" height="45" border="0" /></div>'+"\n";
		$(el).setHTML(html);
//		$('panel'+this.currentFirstPanel).setStyle('opacity', 0.30);
//		$('panel'+this.currentLastPanel).setStyle('opacity', 0.30);
		// set all panels past last one to be greyed out
		for( var i = this.currentLastPanel; i < this.panelCount; i++){
			if(i < this.currentFirstPanel || i > this.currentLastPanel){
				$('panel'+i).setStyle('opacity', 0.30);
			} else {
				$('panel'+i).setStyle('opacity', 1.0);
			}
		}
		$("rightHoverControl").onmouseover	= function() {
			if(!this.isMovingRight && !this.isMoving) {
				this.isMovingLeft = true;
				this.movePanelLeft();
			} // if
		}.bind(this);
		$("leftHoverControl").onmouseover	= function() {
			if(!this.isMovingLeft && !this.isMoving) {
				this.isMovingRight = true;
				this.movePanelRight();
			} // if
		}.bind(this);

		$("rightHoverControl").onmouseout	= function() { this.isMovingLeft = false; this.isMovingRight = false; }.bind(this);
		$("leftHoverControl").onmouseout	= function() { this.isMovingLeft = false; this.isMovingRight = false; }.bind(this);
	}, // constructor..initialize

	movePanelLeft: function() {
		if(this.currentLastPanel==this.panelCount-1) {
				this.isMovingLeft = false;
			return true; //-- don't move
		} // if

		if(this.isMovingLeft) {
			this.isMoving = true; //-- mutex
			this.currentFirstPanel++;
			this.currentLastPanel++;
			//construct animation objects
			var i;
			var elArray = [  ];
			var animObject = {	};
			for(i = this.currentFirstPanel; i <= this.currentLastPanel; i++){
				elArray.push($('panel'+i));
				// moving left
				// first item fades out
				if(i == this.currentFirstPanel)
					animObject[i - this.currentFirstPanel] = { 'opacity' : [ 1.0, 0.3 ] };
				// last item fades in
				else if(i == this.currentLastPanel)
					animObject[i - this.currentFirstPanel] = { 'opacity' : [ 0.3, 1.0 ] };
				// middle's fullbright
				else
					animObject[i - this.currentFirstPanel] = { 'opacity' : [ 1.0, 1.0 ] };
			}
			elArray.push($('scrollContainer'));
			animObject[i - this.currentFirstPanel] = { 'left'   : [this.panelPxPos,this.panelPxPos -= 145] };
			this.fxPanels = new Fx.Elements(
				elArray,
				{
					duration: 750,
					transition: Fx.Transitions.linear,
					onComplete: function(){ this.isMoving = false; this.movePanelLeft(); }.bind(this)
				}
			);
			this.fxPanels.start(animObject);
			if($('panel'+(this.currentLastPanel+1))) {
				$('panel'+(this.currentLastPanel+1)).setStyle('opacity', 0.30);
			}
		} // if
	}, // method..movePanelLeft

	movePanelRight: function() {
		if(this.currentFirstPanel+1==1) {
				this.isMovingRight = false;
				return true; //-- don't move
		} // if

		if(this.isMovingRight) {
			this.isMoving = true; //-- mutex			
			// construct animation objects
			var i;
			var elArray = [  ];
			var animObject = {	};
			for(i = this.currentFirstPanel; i <= this.currentLastPanel; i++){
				elArray.push($('panel'+i));
				// moving right
				// first item fades in
				if(i == this.currentFirstPanel)
					animObject[i - this.currentFirstPanel] = { 'opacity' : [ 0.3, 1.0 ] };
				// last item fades out
				else if(i == this.currentLastPanel)
					animObject[i - this.currentFirstPanel] = { 'opacity' : [ 1.0, 0.3 ] };
				// middle's fullbright
				else
					animObject[i - this.currentFirstPanel] = { 'opacity' : [ 1.0, 1.0 ] };
			}
			elArray.push($('scrollContainer'));
			animObject[i - this.currentFirstPanel] = { 'left'   : [this.panelPxPos,this.panelPxPos += 145] };

			// decrement after here
			this.currentFirstPanel--;
			this.currentLastPanel--;

			this.fxPanels = new Fx.Elements(
				elArray,
				{
					duration: 750,
					transition: Fx.Transitions.linear,
					onComplete: function(){ this.isMoving = false; this.movePanelRight(); }.bind(this)
				}
			);
			this.fxPanels.start(animObject);
		} // if

	} // method..movePanelRight
}); // panoramaNavigationWidget..class