/* Category View- Responsible for displaying the Category list */
function CategoryView(settings, player)
{
	var view= this;
	this.CategoryTabs= [];
	this.Refresh= function(categoryModel) {
		var categoryContainer= $("#"+settings.categoryDiv);
		var ii, item;

		if(!settings.categoryType || 
			settings.categoryType=='horizontal_menu' ||
			settings.categoryType=='vertical_menu')
		{
			// clear
			categoryContainer.empty();

			// top level ul 
			if(settings.categoryType=='horizontal_menu') {
				$('<ul class="jd_menu"></ul>').appendTo(categoryContainer);
			} else {
				$('<ul class="jd_menu jd_menu_vertical"></ul>').appendTo(categoryContainer);
			}

			for(ii= 0; ii<categoryModel.Categories.length; ii++)
			{
				item= categoryModel.Categories[ii];
				var parent= (item.depth==0)?document.getElementById(settings.categoryDiv).childNodes[0]:
					document.getElementById('par'+item.parentID);
				
				if(parent==null) { // the parent doesn't have the ul with the parent id set on it...
					parent= document.getElementById('cat'+item.parentID);
	
					if(settings.categoryType=='horizontal_menu') {				
						parent.childNodes[0].innerHTML+= " &#9660;"; // this is the a link
					} else {
						parent.childNodes[0].innerHTML+= " &raquo;"; // this is the a link
					}
					parent.childNodes[0].setAttribute("class", "accessible");
	
					$('<ul id="par'+item.parentID+'"></ul>').appendTo(parent);
					parent= document.getElementById('par'+item.parentID);
				}
				
				// add it...
				$('<li id="cat'+item.ID+'"><a href="#" class="depth-'+item.depth+'">'+item.title+'</a></li>').appendTo(parent);
				$("#cat"+item.ID).bind("click", item.fullTitle, function(e) {
					player.SetCategory(e.data);
	//				release_model.SetCategory(e.data);
				});
			}
			$('ul.jd_menu').jdMenu({disableLinks:false}); // initialize the menu
		}
		else if(settings.categoryType=='tabs')
		{
			// first, delete all the old tabs.
			categoryContainer.unbind('tabsselect');
			for(ii= this.CategoryTabs.length-1; ii>=0; ii--)
			{
				categoryContainer.tabs('remove', this.CategoryTabs[ii]);
			}
			this.CategoryTabs= [];
			this.TabReleaseInfo= [];

			// now add all the category tabs.
			for(ii= 0; ii<categoryModel.Categories.length; ii++)
			{
				item= categoryModel.Categories[ii];
				var index= categoryContainer.tabs('length');
				
				if(settings.showSearch) {
					index -= 1; // search is always at the end.
				}
				
				$('<div id="category-'+item.ID+'"><div id="carousel-category-'+item.ID+'-view"><div class="release-nav"><div class="right-release-nav"><ul class="sort-nav"></ul></div><div class="left-release-nav"><ul class="sort-order"></ul></div></div><div class="stepcarousel"><div class="belt"></div></div></div></div>').appendTo(categoryContainer);

				categoryContainer.tabs('add', '#category-'+item.ID, item.title, index);
				this.CategoryTabs.push(index);
				
				// create the views and models (ugly hack for now)
				item.View= new CarouselReleaseView(settings, player, 'carousel-category-'+item.ID+'-view');
				item.Model= new ReleaseModel(settings, player);
				item.Model.SetView(item.View);
				item.View.SetModel(item.Model);
				// item.Model.SetCategory(item.fullTitle);
				
				// really should only do this when the item is clicked on, currently it loads everything at once (slow page loads)
				categoryContainer.bind('tabsselect', function(event, ui) {
					if(ui.index>=0 && ui.index<categoryModel.Categories.length)
					{
						if(!categoryModel.Categories[ui.index].Model.CurrentCategory)
						{
// alert("setting the category model!");
							categoryModel.Categories[ui.index].Model.SetCategory(categoryModel.Categories[ui.index].fullTitle);
						}
					}
				    // Objects available in the function context:
				    //ui.tab     // anchor element of the selected (clicked) tab
				    //ui.panel   // element, that contains the selected/clicked tab contents
				    //ui.index   // zero-based index of the selected (clicked) tab
				});
			}
			
			for(ii= 0; ii<categoryModel.Categories.length; ii++)
			{
				var category= categoryModel.Categories[ii];

				if(category.fullTitle==settings.defaultCategory)
				{
					// set the category (it's already the selected one...)
					category.Model.SetCategory(category.fullTitle, function(rm) {
						// categories are loaded.
						if(settings.autoPlay && rm.Releases.length>0) {
							player.SetCurrentRelease(rm.Releases[0]);
						}
					});
			    	$("#"+settings.categoryDiv).tabs('select', parseInt(ii, 10));				
			    	break;
				}
			}
		}
		else if(settings.categoryType=='hulu')
		{
			// first, make them treelike...
			var cats= new Array();
			for(ii= 0; ii<categoryModel.Categories.length; ii++)
			{
				var  item= categoryModel.Categories[ii];
				
				if(item.depth>1) alert('Only two layers depths are supported by this category view');
				// add a new field.
				item.Children= new Array();
				if(item.depth==0) {
					cats.push(item);
				} else {
					// find this one, and add to it's children.
					var found= false;
					var search_array= new Array();
					
					// done this way to be simpler; not faster.
					for(var xx= 0; xx<cats.length; xx++) {
						search_array.push(cats[xx]);
					}

					while(!found && search_array.length) {
						var test= search_array.pop();
						if(test.ID==item.parentID) {
							test.Children.push(item);
							found= true;
						} else if(test.Children.length) {
							for(var xx= 0; xx<test.Children.length; xx++) {
								search_array.push(test.Children[xx]);
							}
						}
					}
					
					if(!found) alert("Error: Didn't find parentID: "+item.parentID);
				}
			}

			// next add all the top level ones...
			// clear
			categoryContainer.empty();

			// top level ul 
			$('<ul class="hulu_menu"></ul>').appendTo(categoryContainer);
			var menu_container= $('ul.hulu_menu', categoryContainer);
			for(ii= 0; ii<cats.length; ii++)
			{
				item= cats[ii];
				$('<li id="cat-'+item.ID+'" class="cat-button top-cat"><a href="#">'+item.title+((item.Children.length)?' &#9660;':'')+'</a></li>').appendTo(menu_container);
			}
			
			// now create all the popup tables....
			var columnCount= 4;
			for(var ii= 0; ii<cats.length; ii++) {
				var item= cats[ii];
				if(item.Children.length) {
/*
					var body= '<div class="channels-dock" id="sub-'+item.ID+'" style="top: 70px; left: 72px; display: none;">\n<table>\n<tbody>\n';*/
					var body= '<div class="channels-dock" id="sub-'+item.ID+'" style="display: none;">\n<table>\n<tbody>\n';
					var rowCount= Math.floor(item.Children.length/columnCount)+((item.Children.length%columnCount)?1:0);
					var index= 0;
					
					for(var row= 0; index<item.Children.length && row<rowCount; row++) {
						body+= '<tr'+((row==0)?' class="first"':'')+'>\n';
						for(var col= 0; col<columnCount; col++) {
							if(index<item.Children.length) {
								var child= item.Children[index];
								body+= '<td id="cat-'+child.ID+'" class="'+((col==0)?'first ':'')+'cat-button sub"><a href="#">'+child.title+'</a></td>\n';
								index++;
							} else {
								body+= '<td'+((col==0)?' class="first cat-button sub"':' class="cat-button sub"')+'><a href="#">&nbsp;</a></td>\n';							}
						}
						body+= '</tr>\n';
					}
					body+= '</tbody>\n</table>\n</div>\n';
					
					$(body).appendTo(categoryContainer);
				}
			}

			view.HideDropDownTimer= null;
			
			$('.cat-button').click(function() {
				var parts= $(this).attr('id').split('-');
				if(parts.length==2) {
					for(var ii= 0; ii<categoryModel.Categories.length; ii++) {
						var item= categoryModel.Categories[ii];
						if(item.ID==parts[1]) {
							player.SetCategory(item.fullTitle);
							
							// hide any menus that are open..
							$('div.channels-dock').hide();
							break;
						}
					}
				}
			});
			
/*
function debugMsg(msg) {
	var xx= $('div#debug').html();
	xx= xx+msg+"<br/>";
	$('div#debug').html(xx);
}
*/
			function resetSubMenuHideTimer(hide_timeout) {
				if(view.HideDropDownTimer) {
					//debugMsg("Clearing timeout for "+view.HideDropDownTimer);
					clearTimeout(view.HideDropDownTimer);
					view.HideDropDownTimer= 0;
				}
				//debugMsg("set timeout for "+view.HideDropDownTimer+" to "+hide_timeout);
				if(hide_timeout) {
	 				view.HideDropDownTimer = setTimeout(function() { $('div.channels-dock').hide(); }, hide_timeout);
				} else {
	 				$('div.channels-dock').hide();
				}
			}

			$('.channels-dock').hover(
				function() { // over
					//debugMsg("Over channels-dock "+$(this).attr('id'));
				},
				function() { // out
					//debugMsg("out of channels-dock "+$(this).attr('id'));
					resetSubMenuHideTimer(0);
				}
			);
			
			$('.sub').hover(
				function() {
					//debugMsg("Over cat-button "+$(this).attr('id'));
					resetSubMenuHideTimer(5000);
				},
				function() {
					//debugMsg("out of cat-button "+$(this).attr('id'));
					resetSubMenuHideTimer(5000);
				}
			);

			$('.top-cat').hoverIntent(
				// over
				function() {
					var parts= $(this).attr('id').split('-');
//debugMsg("Over "+$(this).attr('id'));
					if(parts.length==2) {
						var submenu= $('div.channels-dock#sub-'+parts[1]);

//						submenu.show();
						// if it doesn't belong on a submenu...
						if(!$(this).hasClass('sub')) {
//debugMsg("Not a submenu.  Fading out any visible docks");
							// hide any that are visible
							$('div.channels-dock').hide();
							if(submenu.length>0) {
								submenu.show();
								submenu.css('margin-left', $('.hulu_menu')[0].offsetLeft);

								// egregious hack follows.
								// ie or safari...
								if (navigator.userAgent.indexOf("Firefox")!=-1)
								{
									submenu.css('margin-top', '-1px');
								} else{
									submenu.css('margin-top', '3px');
								}

//								submenu.css('left', $('.hulu_menu').css('margin-left'));
//debugMsg("Set margin left and left to:"+$('.hulu_menu').css('margin-left'));
							}
						}
					}
				},
				// out
				function() {
					var parts= $(this).attr('id').split('-');
//debugMsg("Out of div "+$(this).attr('id'));
					if(parts.length==2) {
						var submenu= $('div.channels-dock#sub-'+parts[1]);
						if(submenu.length>0) {
//debugMsg("div had a submenu "+submenu.length);	
						} else {
//debugMsg("div did not have a submenu "+submenu.length);
						}
					}
				}
			);

/*
			$('.cat-button').hover(
				// over
				function() {
					var parts= $(this).attr('id').split('-');
					if(parts.length==2) {
						var submenu= $('div.channels-dock#sub-'+parts[1]);

						// if it doesn't belong on a submenu...
						if(!$(this).hasClass('sub')) {
							// hide any that are visible
							$('div.channels-dock').fadeOut('fast');
							if(submenu.length>0) {
								if(view.HideDropDownTimer) {
									clearTimeout(view.HideDropDownTimer);
								}
								
								// show it
								submenu.show();
							}
						} else {
							// increase the hover over time...
							if (view.hideDropdownTimer) {
								clearTimeout(view.hideDropdownTimer);
							}
							
							// hide it on delay...
							var parents= $(this).parents('div.channels-dock');
							view.hideDropdownTimer = setTimeout(function() { parents.fadeOut('slow'); }, 5000);
						}

					}
				},
				// out
				function() {
					var parts= $(this).attr('id').split('-');
					if(parts.length==2) {
						var submenu= $('div.channels-dock#sub-'+parts[1]);
						if(submenu.length>0) {
							if(view.HideDropDownTimer) {
							  clearTimeout(view.HideDropDownTimer);
							}

							if(!$(this).hasClass('sub')) {
								// hide it on delay...
								view.hideDropdownTimer = setTimeout(function() { submenu.fadeOut('fast'); }, 500);
							} else {
								// hide it on delay...
								view.hideDropdownTimer = setTimeout(function() { submenu.fadeOut('fast'); }, 5000);
							}
						}
					}
				}
			);
*/
		}
	};
}