/*

   EventBrowser javascriptek:
   
   
 Mukodese: a napokat es az esemenyeket egy Vectorban fogjuk tarolni, es minden egyes 
 kategoria valtas alkalmaval vegigmegyunk a tombokon es megnezzzuk, mely elemek 
 rendelkeznek az adott kategoriaval, majd ezek class-at valtoztatjuk (jelenitjuk meg)
   

*/

//valtozok
//jobb oldali kis bongeszohoz:
//a napokat fogja tartalmazni
var eventDays = new Vector(10);

//esemenyeket fogja tarolni
var events = new Vector(10);

//tobb kategoriaju esemenyt tartalmazo nap CSS class-anak neve
var multipleStyle = "multiple";

//az alapertelmezett CSS class, amire be kell allitani az adott cella style-at
var defaultStyle = "";

//a select-bol ezen ertek jelenti a mindent
var allCategories = "Minden kategória";

//ha ez true, akkor az adott kategoriahoz tartozo esemenyeket is ki kell listaznunk
var enableListEvents = false;

/*
      EventDay class: a jobb oldali tablazatban minden egyes napot
      egy EventDay osztalyu objektum fog reprezentalni
*/
function EventDay(id, categories){
	this.id = id;
	this.categories=categories;
}

EventDay.prototype.getID = function(){
	return this.id;
}

EventDay.prototype.getCategories = function(){
	return this.categories;
}

EventDay.prototype.hasCategories = function(){
  return this.categories.getSize()>0;
}

EventDay.prototype.hasCategory = function(categoryName){
  return this.categories.contains(categoryName);
}

EventDay.prototype.isMultipleEvent = function(){
  return this.categories.getSize()>1;
}

EventDay.prototype.toString = function(){
	return this.id + " " + this.categories;
}

function setDayStyle(id, style){
 var dayElement = document.getElementById(id);
 dayElement.className = style;
}



/*
    Event class:kozepen egy adott event class-a
*/
function Event(id, categories){
	this.id = id;
	this.categories=categories;
	this.visible=true;
}

Event.prototype.getID = function(){
	return this.id;
}

Event.prototype.getCategories = function(){
	return this.categories;
}

Event.prototype.hasCategories = function(){
  return this.categories.getSize()>0;
}

Event.prototype.hasCategory = function(categoryName){
  return this.categories.contains(categoryName);
}

Event.prototype.isMultipleEvent = function(){
  return this.categories.getSize()>1;
}

Event.prototype.getVisible = function(){
  return this.visible;
}

Event.prototype.setVisible = function(isVisible){
   this.visible = isVisible;
}


Event.prototype.toString = function(){
	return this.id + " " + this.categories;
}


/*
  Jobb oldalt a kategoriavaltasakor hivodik meg, es 
  beallitja az adott kategoriakat tartalmazo tablazat cellak CSS style-at.
*/
function changeEventDaysStyle(){
 
 //select tag
 var selectElement = document.getElementById("categorySelector");
 
 //kivalasztott kategoria
 var selectedCategory=selectElement.value;
 
 var currentDay;
 
 //ha "minden" van kivalasztva
 var isAllCategories = (selectedCategory == allCategories);
 
   //vegigmegyunk az osszes napon
   for (var i=0; i<eventDays.getSize();i++){
     currentDay = eventDays.getElementAt(i);
     
     //ha a nap tartalmaz adott kategoriaju esemenyt
     //vagy minden kategoriaju esemenyt ki kell listaznunk:
     if(currentDay.hasCategory(selectedCategory)||isAllCategories){
              
              //TODO mi van, ah nincs is kategoriaja??????? de isAllCategories van??
        //ha tobb kategoriaju esemeny is van az adott napon, akkor ezt
        //egy kozos style-al jelezzuk      
        if(currentDay.isMultipleEvent()){          
          setDayStyle(currentDay.getID(), multipleStyle);          
        }else{
          setDayStyle(currentDay.getID(), currentDay.getCategories().getElementAt(0));
        }
        
     }else{
         //ha elozoleg be volt allitva a CSS class-a, most azt ki kell torolni
          setDayStyle(currentDay.getID(), defaultStyle);          
     }
   } 

  //ha a kozepso megjelenito van, akkor az esemenyeket is ki 
  //kell listazni
  if(enableListEvents){
     //ha az osszeset kell listazni
     if(isAllCategories){
       listAllEvents();
     }else{
        listEvents(selectedCategory);
     }
  }
  
}// fv vege


/*
  Az esemeny listazo ugy mukodik, hogy van egy lathato es egy nem lathato DIV
  Attol fuggoen, hogy az adott esemenyt ki kell-e jelezni,
  a ket div kozott mozgatjuk az esemenyt tartalmazo div-et az appendChild metodus segitsegevel
  (lsd.: DOM)
  
  Ha az osszes esemenyt ki kell listazni, akkor mindegyiket befuzzuk a lathato div-be
*/
function listAllEvents(){
 //a lathato div, ebbe fogjuk belefuzni az esemenyek div-jeit
 var divNode = document.getElementById("currentEvents");
 var currentEvent;
 var eventNode;
  
    //az osszes esemenyt elkerjuk
    for (var i=0; i<events.getSize();i++){
      currentEvent = events.getElementAt(i);
      eventNode = document.getElementById(currentEvent.getID());
     // alert(eventNode.innerHTML);
     //befuzzuk, hogy lathato legyen
      divNode.appendChild(eventNode);
    }
    
}

/*
  Adott kategoriaju esemenyek megjelenitese
*/
function listEvents(eventCategory){
 //ebbe fuzzuk a lathato esemenyeket (adott kategorianak megfeleloeket)
 var visibleDivNode = document.getElementById("currentEvents");
 //a nem megfelelo kategoriajuakat ebbe fogjuk elrejteni
 var hiddenDivNode = document.getElementById("hiddenEvents");
 var currentEvent;
 var eventNode;
 
    //vegigmegyunk az esemenyeken
    for (var i=0; i<events.getSize();i++){
      currentEvent = events.getElementAt(i);
      //ha benne van az aktualisan kivalasztott kategoriaban
      //akkor megjelenitjuk
      if(currentEvent.hasCategory(eventCategory)){
          eventNode = document.getElementById(currentEvent.getID());
          visibleDivNode.appendChild(eventNode);
      }else{
         //egyebkent pedig elrejtjuk
          eventNode = document.getElementById(currentEvent.getID());
          hiddenDivNode.appendChild(eventNode);
      }
      
    }
    
}


//Init: az oldal betoltodesekor meghivjuk ugyanazt az
//esemenyt, ami a select valtozasakor, hogy
//megjelolje a kivalasztott ertekhez tartozo esemenyeket

addLoadEvent(changeEventDaysStyle);