var status = 0;
var a_no = new Array();
var a_date = new Array();
var a_title = new Array();
var a_image = new Array();
var a_detail = new Array();
var a_cnt = 0;

$(function(){
  getArticles();
});


function getArticles(){
  clearArticles();
  
  $.ajax({
    url: './xml/news.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    cache: false,
    error: function(){
    },
    success: function(xml){
        $(xml).find("article").each(
        function(){
            a_cnt++;
            
            a_no[a_cnt] = $(this).find("no").text();
            a_date[a_cnt] = "<B>" +$(this).find("date").text()+ "</B>";
            a_title[a_cnt] = "<B>" + $(this).find("title").text() + "</B>";
            a_image[a_cnt] = $(this).find("image").text();
            a_detail[a_cnt] = $(this).find("detail").text();
        });
        
    },
    complete: function(xhr, textStatus){
      showLatest();
    }
  });
}

function showLatest(){
  clearArticles();

  if(a_cnt<4){
    for(i=1; i<=a_cnt ;i++){
      setArticle(i);
    }
  }else{
    for(i=1; i<=4; i++){
      setArticle(i);
    }
  }
  
  setBoard(1);
}

function showAll(){
  clearArticles();
  
  for(i=1; i<=a_cnt; i++){
    setArticle(i);
  }

}

function setArticle(no){
  var article = "";
  article += '<li id=\"a_'+no+'\">';
  article += '<a href=\"#\" onclick=\"setBoard('+no+')\"><img src=\"images/icon_a.gif\" />';
  article += ' '+a_date[no];
  article += ' '+a_title[no];
  article += '</a></li>';
              
  $("#articles ul").append(article);
  
  if(no%2==0){
    $('#a_'+no).css('background-color', '#B8E4D9');
  }
}

function clearArticles(){
  $("#articles ul").empty();
}

function setBoard(no){
  $("#a_date").empty();
  $("#a_title").empty();
  $("#a_detail").empty();
  
  $("#a_date").append(a_date[no]);
  $("#a_title").append(a_title[no]);
  $("#a_image").css('background-image', 'url(./images/'+a_image[no]+')');
  $("#a_detail").append('<p>'+a_detail[no]+'<p>');
}