adobe.marketplace.TabbedFrame = Class.create({
	initialize: function(element, options){
		this.element = $(element);
		this.options = Object.extend({
			id_prefix: ''
		}, options || {});
		
		this.tabs = this.element.select('.tabbarTab').map(function(e){return new this.Tab(e);}.bind(this));
		this.contentSections = this.element.select('.tabbarContent').map(function(e){return new this.ContentSection(e, this.options);}.bind(this));

		this.tabs.each(function(tab){
			tab.element.observe('click', this.tabClicked.bindAsEventListener(this, tab));
		}.bind(this));
		
		this.selectTab(this.tabs[0]);
	},
	tabClicked: function(event, tab){
		if(tab != this.selectedTab){
			this.selectTab(tab);
		}
	},
	selectTab: function(newTab){
		this.tabs.each(function(tab){
			if(tab == newTab){
				tab.select();
			}
			else {
				tab.deselect();
			}
		}.bind(this));
		
		this.contentSections.each(function(cs){
			if(cs.id == newTab.id){
				cs.show();
				this.selectedContentSection = cs;
			}
			else{
				cs.hide();
			}
		});
		
		this.selectedTab = newTab;
	}
});

// Define Tab class for handling tab element.
// This class is statically included within TabbedFrame to allow it to be overridden
//   by extending classes.
adobe.marketplace.TabbedFrame.addMethods({
	Tab: Class.create({
		initialize: function(element, options){
			this.element = $(element);
			this.id = this.element.getAttribute('id').replace('tabbar_tab_', '');
			this.options = Object.extend({
				id_prefix: ''
			}, options || {});
		},
		select: function(){
			this.element.addClassName('tabbarSelected');
			this.element.removeClassName('tabbarDeselected');
			var textNode = this.element.select(".sifrButtonTextGrey")[0];
			if (textNode) {
		  	textNode.addClassName('sifrButtonText');
		  	textNode.removeClassName('sifrButtonTextGrey');
				textNode.removeClassName('sIFR-replaced');
		  	adobe.marketplace.sifrOnDemand(this.element.getAttribute('id'));
	  	}
		},
		deselect: function(){
			this.element.removeClassName('tabbarSelected');
			this.element.addClassName('tabbarDeselected');
			var textNode = this.element.select(".sifrButtonText")[0];
			if (textNode) {
		  	textNode.addClassName('sifrButtonTextGrey ');
		  	textNode.removeClassName('sifrButtonText');
				textNode.removeClassName('sIFR-replaced');
		  	adobe.marketplace.sifrOnDemand(this.element.getAttribute('id'));
	  	}
		}
	})
});

/**
 * ContentSection: This is the section that will be hidden and shown by
 * 		the tab selection.
**/
adobe.marketplace.TabbedFrame.addMethods({
	ContentSection: Class.create({
		initialize: function(element, options){
			this.element = $(element);
			this.id = this.element.getAttribute('id').replace('tabbar_content_', '');
			this.options = Object.extend({
				id_prefix: ''
			}, options || {});
		},
		show: function(){
			this.element.show();
		},
		hide: function(){
			this.element.hide();
		}
	})
});

// Extending TabbedFrame to special version for the Carousel
adobe.marketplace.TabbedCarousel = Class.create(adobe.marketplace.TabbedFrame, {
	initialize: function($super, element, options){
		$super(element, options);
		this.contentSections[0].showStartupTween();
		
		this.element.select('.paginationLeftArrow, .paginationRightArrow').each(function(e){
			if(e.hasClassName('paginationLeftArrow')){
				e.observe('click', function(){ this.selectedContentSection.prev(); }.bindAsEventListener(this));
			}
			else{
				e.observe('click', function(){ this.selectedContentSection.next(); }.bindAsEventListener(this));
			}
			e.observe('mouseover', function(event, button){button.src = button.src.replace('off', 'on');}.bindAsEventListener(this, e));
			e.observe('mouseout', function(event, button){button.src = button.src.replace('on', 'off');}.bindAsEventListener(this, e));
		});
	}
});

adobe.marketplace.TabbedCarousel.addMethods({
	ContentSection: Class.create(adobe.marketplace.TabbedFrame.prototype.ContentSection, {
		initialize: function($super, element, options){
			$super(element, options);
			this.options.name = this.element.getAttribute('name');
			this.options.sortby = this.element.getAttribute('sortby');
			this.widget = new Spry.Widget.SlidingPanels(this.element.select('.sliderFrame')[0]);
			
			//elements
			this.prevButton = this.element.select('.navigateLeftButton')[0];
			this.nextButton = this.element.select('.navigateRightButton')[0];
			this.panels = this.element.select('.scrollPanel');
			
			//sizing
			var total_width = this.panels.inject(0, function(i, p){ return p.offsetWidth + i; });
			this.panels[0].parentNode.style.height = '270px';
			this.panels[0].parentNode.style.width = total_width + 'px';
			
			this.currentPanel = 0;
			
			//events
			this.prevButton.observe('click', this.prevButtonClicked.bindAsEventListener(this));
			this.nextButton.observe('click', this.nextButtonClicked.bindAsEventListener(this));
			
			this.update();
			
		},
		showStartupTween: function(){
			this.nextButton.style.visibility = 'hidden';
			this.panels[0].parentNode.style.height = '270px';

			var frame = $(this.panels[0].parentNode.parentNode);
			frame.style.left = '750px';
			var startPos = new Spry.Effect.Utils.Position();
			startPos.x = 750;
			startPos.y = 0;
			var endPos = new Spry.Effect.Utils.Position();
			endPos.x = 30;
			endPos.y = 0;
			
			var hideTween = new Spry.Effect.Move(frame,startPos, endPos, {duration:500, finish:this.update.bind(this)});
			Event.observe(window, 'load', function(){
				setTimeout(function(){
					hideTween.start();
				},500);
			}.bind(this));
		},
		show: function($super){
			$super();
			this.update();
		},
		update: function(){
			var max_height = this.panels.max(function(p){ return p.offsetHeight; });
			this.panels[0].parentNode.style.height = max_height + 'px';

			// update buttons
			if(this.currentPanel < (this.panels.length - 1)){
				this.nextButton.style.visibility = 'visible';
			}
			else{
				this.nextButton.style.visibility = 'visible';
				//turn grey
			}

			if(this.currentPanel == 0){
				this.prevButton.style.visibility = 'visible';
				var firstRecord = 1;
			}
			else{
				this.prevButton.style.visibility = 'visible';
				var firstRecord = $R(0, this.currentPanel -1).inject(1, function(sum, i){
					return sum + this.panels[i].select('.offeringImage').length;
				}.bind(this));
			}
			
			// update bottom text
			$(this.element.parentNode).select('.sortDescription')[0].innerHTML = this.options.sortDescriptionTemplate.interpolate({name:this.options.name, sortby:this.options.sortby});

			var lastRecord = firstRecord + this.panels[this.currentPanel].select('.offeringImage').length - 1;
			var totalRecords = this.element.select('.offeringImage').length;
			$(this.element.parentNode).select('.panelStatus')[0].innerHTML = this.options.statusTemplate.interpolate({
				name:this.options.name,
				firstRecord: firstRecord,
				lastRecord: lastRecord,
				totalRecords: totalRecords
			});
		},
		prevButtonClicked: function(event){
			this.prev();
		},
		nextButtonClicked: function(event){
			this.next();
		},
		prev: function(){
			if(this.currentPanel != 0){
				this.currentPanel = this.currentPanel - 1;
			} else {
				this.currentPanel = this.panels.length - 1;
			}
			this.widget.showPanel(this.currentPanel);
			this.update();
		},
		next: function(){
			if(this.currentPanel < (this.panels.length - 1)){
				this.currentPanel = this.currentPanel + 1;
			} else {
				this.currentPanel = 0;
			}
			this.widget.showPanel(this.currentPanel);
			this.update();
		}
	})
});