/**
 * Build tabs news for sneaky purpose.
 * Add:
 * - click on news item -> display it's image in image box.
 */
var SneakyNewsTabs = Class.create(ProtoTabs,{
	imageBox: null,
	newsPlaceHolderImage: null,
	tabDescriptionContainer: null,
	/**
	 * News Tab Options: options for news tab
	 */
	ntOptions: null,
	initialize: function($super, element, options,ntOptions) {
		var imageBoxId = element + "_news_image_box";
		//add default options
		this.ntOptions = Object.extend({
			hasImageBox:true,
			withTabDescription: false,
			newsPlaceHolderImage : "/data/js/prototabs/news_image_placeholder.jpg",
			changeImageOnNavigate: true
		}, ntOptions || {});	

		if(this.ntOptions.hasImageBox == true){
			this.imageBox = $(imageBoxId);
			if(!Object.isElement(this.imageBox) || Object.isUndefined(this.imageBox)){
				alert("Sneaky News Tabs javascript library: We need an image with id = '" + imageBoxId + "' for display news image. Please add one.");
				return;
			}			
		}
		
		if(this.ntOptions.withTabDescription == true){
			this.tabDescriptionContainer = element + "_description";
		}

		/**
		 * mouse over link in the panel will change the image in image box.
		 */
		if(this.ntOptions.changeImageOnNavigate == true){
			var listElements = $A($(element).getElementsByTagName('LI'));
			//loop over each list element
			for(i = 0; i < listElements.length; i++) {	
				//get the tabs
				tabLI = listElements[i];
				var itemLinks = tabLI.getElementsByTagName('A');
				if(itemLinks.length == 0){
					continue;
				}
				tabLI.itemId = itemLinks[0].href.split("#")[1];
				tabLI.linkedPanel = $(tabLI.itemId);

				var that = this;
				newsLinks = $$("#" + tabLI.itemId + " a");
				newsLinks.each(function(newsLink){
					if(that.ntOptions.hasImageBox){
						newsLink.observe("mouseover",that.changeImage.bind(that));
					}
				});
			}				
		}
		
		/**
		 * - We must 
		 * -- intialize property of SneakyNewsTabs before ProtoTabs.initialize() AND
		 * -- other initialize action of SneakyNewsTabs  AS
		 * Prototabs call _beforeOpenPanel in its initialization.
		 */
		$super(element, options);
	},
	
	changeImage: function(event){
		var element = Event.element(event);
		var input = element.next("input.article_image_url");
		if(Object.isUndefined(input)){
			this.imageBox.src = this.ntOptions.newsPlaceHolderImage;
		} else{
			this.imageBox.src = input.value;
		}

		var panelId = element.up(1).readAttribute("id");
		var newsLinkDivs = $$("#" + panelId + " div");
		newsLinkDivs.each(function(newsLinkDiv){
			newsLinkDiv.removeClassName("selected");
		});
		//change style of outer div of news link
		element.up(0).addClassName("selected");
	},
	
	_beforeOpenPanel: function(tab){
		if(this.ntOptions.hasImageBox){
			//find the first news element.
			var newsLink = $$("#" + tab + " a").first();
			//if there is no news in new tab so remove the image in ImageBox.
			if(Object.isUndefined(newsLink)){
				this.imageBox.src = this.ntOptions.newsPlaceHolderImage;
			} else{
				var input = newsLink.next("input.article_image_url");
				if(Object.isUndefined(input)){
					this.imageBox.src = this.ntOptions.newsPlaceHolderImage;
				} else{
					this.imageBox.src = input.value;
				}
			}
		}
		
		if(this.ntOptions.withTabDescription == true){
			var tabId = $(tab).readAttribute("id");
			var descriptionId = tabId + "_description";
			if(!Object.isUndefined(this.tabDescriptionContainer)){
				this.tabDescriptionContainer = $(this.tabDescriptionContainer); 
				if(!Object.isUndefined(this.tabDescriptionContainer)){
					var descriptionContainerId = $(this.tabDescriptionContainer).readAttribute("id");
					var descriptions = $$("#" + descriptionContainerId + " .tab_description");
					descriptions.each(function(description){
						description.hide();
					});
					$(descriptionId).show();
				}
			}
		}
	}
});