var HotListExt = AFL_JS.ViewController.HotList = new Object();
		
		HotListExt.Settings = {
			Id : 'dynamic_hot_list',
			TrashId : 'tab_hot_list_trash',
			PageWidth : 717,
			BoxesPerPage : 5,
			EmptyHotListClass : 'dynamic_hot_list_empty',
			DefaultHotListClass : 'dynamic_hot_list_width',
			NotLoggedInInfoId : 'hotlist_not_logged_in_container',
			BoxSettings : {
				HotListed : 'item_hot',
				TrashAccept : 'trashable',
				IdPrefix : 'hot_listed_'
			},
			Accept : 'item_not_hot',
			HotListed : 'item_hot',
			TrashAccept : 'trashable'
		}
		
		HotListExt.Initialize = function(Reference) {
			HotListExt.InitializeDragAndDrop(Reference);
			
			HotListExt.Update();
			new Effect.Appear(HotListExt.Settings.Id);
		}
		
		HotListExt.Update = function() {

			var Elements = (Object.isArray(MainGrid.References.HotListed)) ? 0 : Object.keys(MainGrid.References.HotListed).length;
		
			HotListExt.ToggleEmptyClass(!Elements);
				
			var Pages = Math.ceil(Elements/HotListExt.Settings.BoxesPerPage);
			if(!Pages) Pages = 1;
			$(HotListExt.Settings.Id).style.width = (Pages * HotListExt.Settings.PageWidth) + 'px';
			
			HotListExt.Pagination.Settings.Details.TotalPages = Pages;
			HotListExt.Pagination.Update();
		}
		/////////////////////////////////////////////////////////////////////////////////
		///////////////////////////////     D&D   START    //////////////////////////////
		///////////////////////////////                    //////////////////////////////
		/////////////////////////////////////////////////////////////////////////////////
		
		HotListExt.RegisterDraggables = function(Draggables) {
			for(var a = 0; a < Draggables.length; a++) {
				AFL_JS.ViewController.DragAndDrop.Storage.Draggables.push(
					new Draggable(Draggables[a], {
						revert: true,
						onStart : function() {
							$(HotListExt.Settings.TrashId).className = 'hot_list_trash_expand';	
						},
						onEnd : function() {
							$(HotListExt.Settings.TrashId).className = '';
						}
					})
				);
			}
		}
			
		HotListExt.InitializeDragAndDrop = function(Reference) {
		
			if(!Object.isArray(Reference))
				HotListExt.RegisterDraggables(Object.values(Reference));
		
			Droppables.add(HotListExt.Settings.Id, {
  				accept: HotListExt.Settings.Accept,
  				overlap: 'horizontal',
   				onDrop: function(element) { 
   					MainGrid.AddToHotlist(MainGrid.References.HTMLReference[element.id])
   				}
			});
			Droppables.add(HotListExt.Settings.TrashId, {
  				accept:HotListExt.Settings.TrashAccept,
   				onDrop: function(element) {
   					for(var MemId in MainGrid.References.HotListed) {
   						if(MainGrid.References.HotListed[MemId] == element.id) {
   							MainGrid.RemoveFromHotlist(MemId);
   							break;
   						}
   					}
   				}
			});
		}
		
		/////////////////////////////////////////////////////////////////////////////////
		//////////////////////////////////  BOXES START    //////////////////////////////
		//////////////////////////////////                 //////////////////////////////
		/////////////////////////////////////////////////////////////////////////////////
		
		HotListExt.AddBox = function(Data) {
			
			var MainWrapper = new Element('DIV', { 
				id: HotListExt.Settings.BoxSettings.IdPrefix +Data.UniqueId
			});
			
			MainWrapper.className = HotListExt.Settings.BoxSettings.HotListed + ' ' +HotListExt.Settings.BoxSettings.TrashAccept + ' font member_box';
			
			var ProfilenameHolder = new Element('DIV');
			ProfilenameHolder.className = 'member_name logged_off';

			ProfilenameHolder.appendChild(new Element('SPAN').update(Data.Member.Profilename));
			
			var Image = new Element('IMG', {
				width : 105,
				height: 105,
				src : Data.Member.PhotosSmall[0],
				alt : 'Member photo'
			});
			Image.className = 'member_photo';
			
			var PNHolder = new Element('DIV');
			PNHolder.className = Data.FMN.DCStatus.ClassName;

			var OnlineHolder = new Element('DIV');
			var sClassNameExtension = Data.Member.OnlineStatus.State ? 'on' : 'off';
			OnlineHolder.className = 'profile_online_'+sClassNameExtension;
			
			var PNNumber = new Element('DIV');
			
			if(Data.FMN.Number){
				var PNNumber = new Element('DIV').update(Data.FMN.Number);
				PNNumber.className = 'member_number';
			}
			else {
				var PNNumber = new Element('div');
				//var PNNumber = new Element('div').update('no personal number.');	
				//PNNumber.setAttribute('href', '/mypage/edit/change_number');
				PNNumber.className = 'no_member_number';
			}

			var Review = new Element('DIV');
			Review.className = 'member_review';
			
			var ImageContainer = new Element('DIV');
			ImageContainer.className = 'image_container';
			
			var IconContainer = new Element('DIV');
			IconContainer.className = 'icon_container';
			
			Review.appendChild(new Element('IMG', {
				width: 16,
				height: 11,
				src : "/assets/images/th_icons/flags_codes/"+Data.Member.Location.CountryCode+".gif",
				alt : ""
			}));
			
			var ViewProfile = new Element('A').update("View Profile");
			ViewProfile.setAttribute('href', '/member/'+Data.Member.Profilename);
			
			Review.appendChild(ViewProfile);

			MainWrapper.appendChild(ProfilenameHolder);
			MainWrapper.appendChild(ImageContainer);
			ImageContainer.appendChild(Image);
			ImageContainer.appendChild(IconContainer);
			IconContainer.appendChild(OnlineHolder);
			IconContainer.appendChild(PNHolder);
			MainWrapper.appendChild(PNNumber);
			MainWrapper.appendChild(Review);
			
			$(HotListExt.Settings.Id).appendChild(MainWrapper);
			
			HotListExt.RegisterDraggables([MainWrapper.id]);
			
			return MainWrapper;
		}
		
		HotListExt.RemoveBox = function(BoxId) {
			Element.remove($(BoxId));
		}
		
		/////////////////////////////////////////////////////////////////////////////////
		////////////////////////////   PAGINATION START    //////////////////////////////
		////////////////////////////                       //////////////////////////////
		/////////////////////////////////////////////////////////////////////////////////
		
		HotListExt.Pagination = new Object();
		
		HotListExt.Pagination.Settings = {
			NextId : 'HotListNext',
			PreviousId : 'HotListPrevious',
			MiddleId : 'HotListMiddle',
			Details : {
				CurrentPage : 1
			}
		}
		
		HotListExt.Pagination.Update = function() {
		
			$(HotListExt.Pagination.Settings.NextId).onclick = AFL_JS.Common.CancelEvent;
			$(HotListExt.Pagination.Settings.PreviousId).onclick = AFL_JS.Common.CancelEvent;
			
			var Details = HotListExt.Pagination.Settings.Details;
			
			with($(HotListExt.Pagination.Settings.NextId)) {
				if(Details.CurrentPage != Details.TotalPages) { //If there is more pages in the set. 
					style.display = 'inline';
					onclick = HotListExt.Pagination.MoveForward;
				} else {
					style.display = 'none';
				}
			}
			with($(HotListExt.Pagination.Settings.PreviousId)) {
				if(Details.CurrentPage > 1)
				{
					style.display = 'inline';
					onclick = HotListExt.Pagination.MoveBack;
				} else {
					style.display = 'none';
				}
			}
			
			$(HotListExt.Pagination.Settings.MiddleId).innerHTML = (Details.TotalPages > 1) 
				? HotListExt.Pagination.Settings.Details.CurrentPage+' of '+HotListExt.Pagination.Settings.Details.TotalPages
				: '';
			
			
		}
		
		HotListExt.Pagination.MoveForward = function() {
			HotListExt.Pagination.Move(-1)
		}
		
		HotListExt.Pagination.MoveBack = function() {
			HotListExt.Pagination.Move(1)
		}
		
		HotListExt.Pagination.Move = function(direction) {
			if(AFL_JS.Common.Busyness.IsBusy('HotListPagination')) return;
			AFL_JS.Common.Busyness.Set('HotListPagination', true, 700);
			
			new Effect.Move(HotListExt.Settings.Id, {y: 0, x: (direction * HotListExt.Settings.PageWidth), duration: 0.6, mode: 'relative'});
			
			HotListExt.Pagination.Settings.Details.CurrentPage = HotListExt.Pagination.Settings.Details.CurrentPage - direction; 
	
			HotListExt.Pagination.Update(false);
		}
		
		/////////////////////////////////////////////////////////////////////////////////
		//////////////////////////////////   MISC START    //////////////////////////////
		//////////////////////////////////                 //////////////////////////////
		/////////////////////////////////////////////////////////////////////////////////
		
		
		HotListExt.ToggleEmptyClass = function(direction) {
			with(HotListExt.Settings) {
				if(direction) {
					$(Id).className = DefaultHotListClass + ' ' + EmptyHotListClass;
				} else {
					$(Id).className = DefaultHotListClass;
				}
			}
		}
		
		HotListExt.ShowNotLogged = function() {
			$(HotListExt.Settings.NotLoggedInInfoId).style.display = 'block';
		}