// Extend slider for Health Expert Q&A use
var cnnHealthMainExpertsSlider = (typeof Class === "object") ? Class.create() : {};

cnnHealthMainExpertsSlider.prototype = Object.extend(new cnnHorizontalSlider(), {
	initialize: function( config ) {
		this.config = config;
		this.defaults = {
			stripContainerId       : 'cnnExpertsSlider',
			stripClass             : 'cnnExpertsSlide',
			navContainerClass      : 'cnnExpertsMenu',
			displayWidth           : 730
		};
		this.settings = Object.extend( this.defaults, this.config );

		try {  // reading from settings to set value of properties possibly required by cnnHorizontalSlider
			this.elIdentifier   = this.settings.stripClass;
			this.container      = this.settings.stripContainerId;
			this.navDiv         = this.settings.navContainerClass;
			this.viewPort       = this.settings.displayWidth;
			this.currentPanel   = this.settings.currentPanel || 0;
		} catch (e) {}

		try {
			this.locked = false;
			this.sliderWidth = this.findPanels();
			this.numScreens = this.sliderWidth;
			this.negativeOffSetMax = this.setOffSet();
			this.positiveOffSetMax = 0;
			this.setSliderWidth();
			this.buildNav();
			this.getCurrentOffSet();
		} catch(e) {}
	},

	findPanels: function () {
		var panels = $(this.container).select('.' + this.elIdentifier);
		return panels.length;
	},

	buildNav: function () {
		var selectedTab = this.currentPanel,
			tabs = $(this.navDiv).select('span');
		
		if ( this.currentPanel < this.numScreens ) {
			selectedTab = this.currentPanel;
		}

		for ( var i = 0, tab, tabClass; i < this.numScreens; i++ )
		{
			tab = tabs[i];
			tabClass = tab.classNames().grep(/cnn_fabh[^_]+$/);
			
			if ( i === selectedTab ) {
				$(this.container).style.left = '' + ( -1 * i * this.viewPort ) + 'px';
				$(this.container).style.visibility = 'visible';
				tab.addClassName( tabClass + '_on' );
			} else {
				tab.removeClassName( tabClass + '_on' );
			}

			tab.observe( 'click', this.slide.bind( this, i ) );

		}
	},

	slide: function (num) {
		var self = this;
		if ( ! this.locked ) {
			this.locked = true;
			this.timer = setTimeout(
				function () {
					self.getCurrentOffSet();
					var finalCoord = -1 * num * self.viewPort;
					var moveByVal = ( finalCoord > self.currOffSet )
									? ( finalCoord - self.currOffSet )
									: ( -1 * ( self.currOffSet - finalCoord ) );
					var duration = Math.abs( 0.5 * (self.currentPanel - num) );
					if ( self.negativeOffSetMax < finalCoord || finalCoord < self.positiveOffSetMax ) {
						new Effect.Move(
							$(self.container).id,
							{
								x: moveByVal,
								duration: duration,
								beforeStart: function () {
									self.showImages();
								},
								afterFinish: function () {
									self.setCurrentPanel();
									self.updateNav( num );
								}
							}
						);
					}
	
					self.locked = false;
	
				},
				300
			);
		}
	},

	showImages: function () {},

	updateNav: function () {
		var tabs = $(this.navDiv).select('span');
		for ( var i = 0, tab, tabClass; i < tabs.length; i++ )
		{
			tab = tabs[i];
			tabClass = tab.classNames().grep(/cnn_fabh[^_]+$/);

			if ( i === this.currentPanel ) {
				tab.addClassName( tabClass + '_on' );
			} else {
				tab.removeClassName( tabClass + '_on' );
			}	
		}
	}
});