/**
 * Initialize the scrollable div
 */
function initScrollDownWidget(containerId, contentHash, isMutual){
	/**
	 * This hash contain all div's ids in collectio,this collection will be used in mutual mode
	 */
	var tabsHash = [];
	var tabsId = [];
	/**
	 * Just 1 tab open in one time
	 */
	var Mutual = isMutual;
	var contentClass = "scroll_down_item_content";
	var tabClass = "scroll_down_item";
	var tabSelectedClass = "scroll_down_item_selected";
	var tabHoverClass = "scroll_down_item_hover";
	var containerClass = "scroll_down_container";
	
	creatTabsDivs(containerId, contentHash);
	initiTabsDivs();
	tabsHash = contentHash;
	Mutual = isMutual;
	
	/**
	 * Creating Divs and structure
	 * @param {Object} containerId
	 * @param {Object} contentHash
	 */
	function creatTabsDivs(containerId, contentHash){
        var container=YUI.get(containerId);
		var parent=document.createElement('div');
		container.appendChild(parent);
		YUI.addClass(parent, containerClass);
		parent.id=YUI.generateId();
		
		for (var i = 0; i < contentHash.length; i++) {
			var curDivId = parent.id + i.toString();
			if (!YUI.get(curDivId)) {
				var divParent = document.createElement('div');
				var divContent = document.createElement('div');
				divParent.id = curDivId;
				divContent.id = curDivId + "Content";
				divParent.innerHTML = contentHash[i].Title;
				divContent.innerHTML = contentHash[i].Content;
				
				document.getElementById(containerId).appendChild(divParent);
				document.getElementById(containerId).appendChild(divContent);
				
				tabsId.push(curDivId);
			}
		}
	}
	/**
	 * Initialize tabs and their attributes
	 * @param {Object} containerID
	 */
	function initiTabsDivs(containerId){

		
		for (var i = 0; i < tabsId.length; i++) {
		
			//CSS for div which contain Title of item
			var header = YUI.get(tabsId[i]);
			YUI.addClass(header, tabClass);
			//Css for div which contains Content of item
			var content = YUI.get(tabsId[i] + "Content");
			YUI.addClass(content, tabClass);
			YUI.addClass(content, contentClass);
			
			
			//hover events handlers
			removeEvent(header, "mouseover", mouseInEventWrapper, false);
			removeEvent(header, "mouseout", mouseOutEventWrapper, false);
			addEvent(header, "mouseover", mouseInEventWrapper, false);
			addEvent(header, "mouseout", mouseOutEventWrapper, false);
			//click event handler
			removeEvent(header, "click", clickEventWrapper, false);
			addEvent(header, "click", clickEventWrapper, false);

			
			hideTab(tabsId[i]);
		}
	
	}
	function clickEventWrapper(eventArg){
		if (eventArg.srcElement) 
			scrollDownMouseClicked(eventArg.srcElement.id);
		else 
			scrollDownMouseClicked(eventArg.currentTarget.id);
	}
	function mouseInEventWrapper(eventArg){
		if (eventArg.srcElement) 
			scrollDownMouseIn(eventArg.srcElement.id);
		else 
			scrollDownMouseIn(eventArg.currentTarget.id);
	}
	function mouseOutEventWrapper(eventArg){
		if (eventArg.srcElement) 
			scrollDownMouseOut(eventArg.srcElement.id);
		else 
			scrollDownMouseOut(eventArg.currentTarget.id);
	}
	/**
	 * Fire on MouseClick for div
	 * @param {Object} DivId
	 */
	function scrollDownMouseClicked(tabID){
		var content = YUI.get(tabID + "Content");
		if (content) {
			if (Mutual) 
				for (var i = 0; i < tabsId.length; i++) {
					if (tabsId[i] != tabID) 
						hideTab(tabsId[i]);
				}
			if (YUI.getStyle(content, "display") == "none") {
				showTab(tabID);
			}
			else {
				hideTab(tabID)
			}
		}
	}
	function hideTab(tabID){
	
		YUI.removeClass(YUI.get(tabID), tabSelectedClass);
		YUI.removeClass(YUI.get(tabID), tabHoverClass);
		YUI.setStyle(YUI.get(tabID + "Content"), "display", "none");
	}
	
	function showTab(tabID){
		YUI.addClass(YUI.get(tabID), tabSelectedClass);
		YUI.removeClass(YUI.get(tabID), tabHoverClass);
		YUI.setStyle(YUI.get(tabID + "Content"), "display", "block");
	}
	
	/**
	 * Fire on MouseMoveIn for div
	 * @param {Object} DivId
	 */
	function scrollDownMouseIn(tabID){
		var content = YUI.get(tabID + "Content");
		var head = YUI.get(tabID);
		if (content) {
			if (YUI.getStyle(content, "display") == "none") {
				YUI.addClass(head, tabHoverClass);
			}
		}
	}
	/**
	 * Fire on MouseMoveOut for div
	 * @param {Object} DivId
	 */
	function scrollDownMouseOut(tabID){
		var content = YUI.get(tabID + "Content");
		var head = YUI.get(tabID);
		if (content) {
			if (YUI.getStyle(content, "display") == "none") {
				YUI.removeClass(head, tabHoverClass);
			}
		}
	}
	
	
	/**
	 * http://www.scottandrew.com/weblog/articles/cbs-events
	 * functions to add/remove event to object work in IE&Mozilla
	 * @param {Object} obj
	 * @param {Object} evType
	 * @param {Object} fn
	 * @param {Object} useCapture
	 */
	function addEvent(obj, evType, fn, useCapture){
		if (obj.addEventListener) {
			obj.addEventListener(evType, fn, useCapture);
			return true;
		}
		else 
			if (obj.attachEvent) {
				var r = obj.attachEvent("on" + evType, fn);
				return r;
			}
			else {
				alert("Handler could not be attached");
			}
	}
	function removeEvent(obj, evType, fn, useCapture){
		if (obj.removeEventListener) {
			obj.removeEventListener(evType, fn, useCapture);
			return true;
		}
		else 
			if (obj.detachEvent) {
				var r = obj.detachEvent("on" + evType, fn);
				return r;
			}
			else {
				alert("Handler could not be removed");
			}
	}
}