/*==============================================================================
 * initEmployerList
 * retrieve the list of employers and possibly their URLs
 *============================================================================*/
function initEmployerList() 
{
    dojo.xhrPost({
      // URL -  destination you want to send your request
      url: contextPath + "/SpinWeb/actions/www/ajax/getEmployerList.do",
      
      encoding: "utf-8",
      
      // Callback function that will be invoked asynchronously
      load: function(response, ioArgs){ updateEmployerArea(response);},

      // Error handler function that will be invoked in case of an error
      error: function(response, ioArgs){ alert("Error initializing employer list: " + ioArgs); },

      // Type of data you want to receive
      mimetype: "text/json-comment-filtered"         
    }); 
}

/*==============================================================================
 * updateEmployerArea
 * called with the results of the initEmployerList AJAX call, this will 
 * populate the the DIV identified by 'bullet' with the list of employers
 * as LI elements in an UL.
 * 
 * @param data JSON data from server with the list of employer info, in this 
 * format:
 * <Employers>
 *      <EmployerInfo>
 *          <name>employername</name>
 *          <url>employerURL</url>
 *      </EmployerInfo>
 *      .
 *      .
 *      .
 * </Employers>
 * There may be 0 - n <EmployerInfo>
 * Each <EmployerInfo> has exactly 1 <name>, and 0 or 1 <url>
 *============================================================================*/
function updateEmployerArea(data) 
{   
    /*--------------------------------------------------------------------------
     * parse the JSON data into an object
     *------------------------------------------------------------------------*/
    var employerData = eval('(' + data + ')');
    
    var employerArea = dojo.byId('bullet');         // DIV to contain list
    var employers = employerData.employerList;	    // list of all employers
    var li;
    var a;
    var name;
    var link;
    var ul = document.createElement('ul');
    ul.id = 'employerList';
    for(var i = 0; i < employers.length; i++)
    {
        li = document.createElement('li');         // create child LI
        li.className = 'employer';
        name = employers[i].name;
        link = employers[i].url;
        // if there is a URL, create an anchor and place it in the LI item
        if (link)
        {
            a = document.createElement('a');
            a.href = link;
            a.target = 'employer';
            a.innerHTML = name;
            dojo.place(a, li, 'last');
        }
        // otherwise just put the employer name in the LI
        else
        {
            li.innerHTML = name;
        }
        
        // add it to the bottom of the UL list
        dojo.place(li, ul, 'last');
    }
    dojo.place(ul, employerArea, 'last');
}

/*==============================================================================
 * initNewsList
 * retrieve the list of news articles
 *============================================================================*/
function initNewsList() 
{
    dojo.xhrPost({
      // URL -  destination you want to send your request
      url: contextPath + "/SpinWeb/actions/www/ajax/getNewsList.do",
      
      encoding: "utf-8",
      
      // Callback function that will be invoked asynchronously
      load: function(response, ioArgs){ updateNewsList(response);},

      // Error handler function that will be invoked in case of an error
      error: function(response, ioArgs){ alert("Error initializing news list: " + error.message); },

      // Type of data you want to receive
      mimetype: "text/json-comment-filtered"         
    });
    
}

/*==============================================================================
 * updateNewsList
 * called with the results of the initNewsList AJAX call, this will 
 * populate the the DIV identified by 'bullet' with the list of news article
 * titles in an UL.
 * 
 * @param data JSON data from server with the list of employer info, in this 
 * format:
 * <NewsArticles>
 *      <NewsInfo>
 *          <id>news item id</id>
 *          <title>news item title</title>
 *          <date>news item date</date>
 *      </NewsInfo>
 *      .
 *      .
 *      .
 * </NewsArticles>
 * There may be 0 - n <NewsInfo>
 * Each <NewsInfo> has exactly 1 <id>, exactly 1 <title> and exactly 1 <date>
 *============================================================================*/
function updateNewsList(data) 
{  
    /*--------------------------------------------------------------------------
     * parse the JSON data into an object
     *------------------------------------------------------------------------*/
    var newsData = eval('(' + data + ')');
    
    var newsListArea = dojo.byId('bullet');     // DIV to contain list
    var articles = newsData.newsItems;		// list of all articles
    var li;
    var a;
    var id;
    var title;
    var date;
    var ul = document.createElement('ul');
    ul.id = 'newsList'; 
    for(var i = 0; i < articles.length; i++)
    {
        li = document.createElement('li');                      // create child LI
        li.className = 'newsItem';
        id = articles[i].id;
        title = articles[i].title;
        date = articles[i].date;
        dateDiv = document.createElement('div');
        dateDiv.innerHTML = date;
        dateDiv.className = 'newsDate';
        dojo.place(dateDiv, li, 'last');
        titleDiv = document.createElement('div');
        titleDiv.innerHTML = title;
        titleDiv.className = 'newsTitle';
        titleDiv.style.textDecoration = 'underline';
        titleDiv.style.cursor = 'pointer';
        titleDiv.id = 'news' + id;
        dojo.place(titleDiv, li, 'last');
        
        // add it to the bottom of the UL list
        dojo.place(li, ul, 'last');
    }
    dojo.place(ul, newsListArea, 'last');

    /*--------------------------------------------------------------------------
     * attach events to each title to bring up the article in the main window
     *------------------------------------------------------------------------*/
    var newsLinks = document.getElementsByClassName('newsTitle');
    for (var i = 0; i < newsLinks.length; ++i)
    {
        Event.observe(newsLinks[i], 'click', updateNewsArea, false);
    }
    
    /*--------------------------------------------------------------------------
     * bring up the initial article
     *------------------------------------------------------------------------*/
    updateNewsAreaWithId(0);    // call with zero to get the most recent news
}

/*==============================================================================
 * updateNewsArea
 *  @param event target, which has news item id (in the form of newsXXX, where XXX is the DB id)
 *  Event handler called when a news title is clicked. It updates the main
 *  window with the selected news item.
 *============================================================================*/
function updateNewsArea(e)
{
    var target = Event.element(e);
    var id = target.id.substring(4);
    updateNewsAreaWithId(id);
}

/*==============================================================================
 * updateNewsAreaWithId
 *  @param id news item id
 *  Request the news item with the specified id from the server.
 *============================================================================*/
function updateNewsAreaWithId(id)
{
    dojo.xhrPost({
      // URL -  destination you want to send your request
      url: contextPath + "/SpinWeb/actions/www/ajax/getArticle.do",
      //url: contextPath + "/SpinWeb/jsonNews",
      
      // parameters
      content: { 'id' : id },
      
      encoding: "utf-8",
      
      // Callback function that will be invoked asynchronously
      load: function(response, ioArgs){ updateArticle(response);},

      // Error handler function that will be invoked in case of an error
      error: function(response, ioArgs){ alert("updateNewsAreaWithId error = " + ioArgs.xhr.status); },

      // Type of data you want to receive
      mimetype: "text/json-comment-filtered"         
    });
}

/*==============================================================================
 * updateArticle
 * called with the results of the updateNewsAreaWithId() AJAX call, this will 
 * populate the page with the article header (in the DIV with id 'newsHeader'), 
 * if necessary add any photos below the header, and the article text (in the
 * DIV with id 'article')
 * Since some articles have no pictures, I remove the DIV for the picture area
 * each time.
 * 
 * @param data JSON data from server with the list of employer info, in this 
 * format:
 * <article>
 *      <title>article title</title>
 *      <text>article text</text>
 *      <photo1>file name of first photo</photo1>
 *      <photo1Width>width of first photo</photo1Width>
 *      <photo1Height>height of first photo</photo1Height>
 *      <photo2>file name of second photo</photo2>
 *      <photo2Width>width of second photo</photo2Width>
 *      <photo2Height>height of second photo</photo2Height>
 * </article>
 * There is exactly 1 of <article>, <text>
 * There may be 0 or 1 of <photo1>, <photo2>
 * If <photo1> exists, there is exactly 1 of <photo1Width>, <photo1Height>
 * If <photo2> exists, there is exactly 1 of <photo2Width>, <photo2Height>
 *============================================================================*/
function updateArticle(data) 
{
    /*--------------------------------------------------------------------------
     * parse the JSON data into an object
     *------------------------------------------------------------------------*/
    var articleData = eval('(' + data + ')');
    
    /*--------------------------------------------------------------------------
     * update article header
     *------------------------------------------------------------------------*/
    var newsHeader = dojo.byId('newsHeader');
    var title = articleData.title;
    newsHeader.innerHTML = title;

    /*--------------------------------------------------------------------------
     * remove any current photos
     *------------------------------------------------------------------------*/
    var newsImagesArea = dojo.byId('newsImageBlock');
    if (newsImagesArea != null)
    {
        newsImagesArea.parentNode.removeChild(newsImagesArea);
    }
    
    /*--------------------------------------------------------------------------
     * get the photos, if any
     *------------------------------------------------------------------------*/
    var photoBlock;
    var photoAnchor;
    var photoImg;
    var photo1Exists = false;
    var photos = articleData.photo1;
    // if there is a URL, create an anchor and place it in the LI item
    if (photos)
    {
        photoBlock = document.createElement('div');
        photoBlock.className = 'newsImage';
        photoAnchor = document.createElement('a');
        photoAnchor.href = contextPath + '/images/newsimages/' + articleData.photo1;
        photoImg = document.createElement('img');
        photoImg.alt = 'news image';
        photoImg.src = contextPath + '/images/newsimages/' + articleData.photo1;
        photoImg.width = articleData.photo1Width;
        photoImg.height = articleData.photo1Height;
        dojo.place(photoImg, photoAnchor, 'last');
        dojo.place(photoAnchor, photoBlock, 'last');
        
        newsImagesArea = document.createElement('div');
        newsImagesArea.className = 'newsImageArea';
        newsImagesArea.id = 'newsImageBlock';
        dojo.place(photoBlock, newsImagesArea, 'last');
        
        dojo.place(newsImagesArea, newsHeader, 'last');
        photo1Exists = true;
    }
    
    var photos = articleData.photo2;
    // if there is a URL, create an anchor and place it in the LI item
    if (photos)
    {
        photoBlock = document.createElement('div');
        photoBlock.className = 'newsImage';
        photoAnchor = document.createElement('a');
        photoAnchor.href = contextPath + '/images/newsimages/' + articleData.photo2;
        photoImg = document.createElement('img');
        photoImg.alt = 'news image';
        photoImg.src = contextPath + '/images/newsimages/' + articleData.photo2;
        photoImg.width = articleData.photo2Width;
        photoImg.height = articleData.photo2Height;
        dojo.place(photoImg, photoAnchor, 'last');
        dojo.place(photoAnchor, photoBlock, 'last');
        
        if (photo1Exists)
        {
            dojo.place(photoBlock, newsImagesArea, 'last');
        }
        else
        {
            newsImagesArea = document.createElement('div');
            newsImagesArea.className = 'newsImageArea';
            newsImagesArea.id = 'newsImageBlock';
            dojo.place(photoBlock, newsImagesArea, 'last');

            dojo.place(newsImagesArea, newsHeader, 'last');
        }
    }
    
    /*--------------------------------------------------------------------------
     * fill in the article text
     *------------------------------------------------------------------------*/
    var articleBlock = dojo.byId('article');
    articleBlock.innerHTML = articleData.text;
}