$(function(){

    //!- get xml file path
    var xmlpath = $('#path').text();

    $.get(xmlpath, {}, function(data)
      {
        //!- add base
        $('#tab').append('<div id="dynamic"><div class="wrapper"><ul /></div></div>');
        //$('#dynamic').css({position:'relative'});

        //!- add elements to base from xml nodes
        var _lapel = ($(data).find('art').size() - ($(data).find('art').size() % 2)) / 2 +1; //!- 右段と左段の量を調整

        $(data).find('art').each(function(i, el)
          {
            var _name = $(el).attr('id') == undefined ? $(el).attr('name') : $(el).attr('id');
            var _index = (i + 1) < 10 ? ('0' + (i + 1)) : (i + 1);

            //!- position fix
            var _x = i < _lapel ? 4 : 260;
            var _y = 15 * ((i % _lapel) + 1);

            //!- if $(el) has multiple childs or is not "url", change url & add prefix string
            var _prefix = ($(el).children().size() < 2 && $(el).children('*:eq(0)').is('url'))? '' : '+ ';
            var _onClicked = $(el).children('*:eq(0)').is('url') ? $(el).children('url').text() : 'javascript:void(0)';

            //!- insert elment
            var added = $('#dynamic .wrapper ul:eq(0)').append(
              '<li style="width:250px; position:absolute; left:' + _x + 'px; top:' + _y  + 'px;' + '">' +
              ('<a href="' + _onClicked + '">') +
              _prefix + _name +
              '</a></li>'
            );

            //!- add callback function onClick (it's special case)
            if(!$(el).children('*:eq(0)').is('url')){

              //
			  if($.browser.msie && $.browser.version < 8)
			  {
              	$('#dynamic .wrapper').append(
               		//'<ul style="position:relative; width:460px; height:374px; display:none; top:10px; left:-20px;" />'
					'<ul style="position:relative; width:460px; height:374px; display:none;" left:30px;/>'
				)
				}else{
					$('#dynamic .wrapper').append(
               		//'<ul style="position:relative; width:460px; height:374px; display:none; top:10px; left:20px;" />'
					'<ul style="position:relative; width:460px; height:374px; display:none;" />'
				)
				}
              //
              added.children('li:eq(' + i + ') a:eq(0)').data('key',{value:$('#dynamic .wrapper').children().size() - 1});
              added.children('li:eq(' + i + ') a:eq(0)').click(function()
                {
                  $('#dynamic .wrapper').children().css({display:'none'});
                  $('#dynamic .wrapper').children('ul:eq(' + ($(this).data('key').value) +  ')').css({display:'block'});
                }
              );
              //
              $(el).children().each(function(i, el)
                {
                  var _name = $(el).attr('id') == undefined ? $(el).attr('name') : $(el).attr('id');
                  var _index = (i + 1) < 10 ? ('0' + (i + 1)) : (i + 1);

                  //!- position fix
                  var _x = i < _lapel ? 5 : 260;
                  var _y = 15 * ((i % _lapel) + 1);

                  //!- if $(el) has multiple childs or is not "url", change url & add prefix string
                  var _prefix = ($(el).children().size() < 2 && $(el).children('*:eq(0)').is('url'))? '' : '+ ';
                  var _onClicked = $(el).children('*:eq(0)').is('url') ? $(el).children('url').text() : 'javascript:void(0)';

                  //!- insert elment
                  $('#dynamic .wrapper').children().eq($('#dynamic .wrapper').children().size() - 1).append(
                    '<li style="width:250px; position:absolute; left:' + _x + 'px; top:' + _y  + 'px;' + '">' +
                      ('<a href="' + _onClicked + '">') +
                      _prefix + _name +
                      '</a></li>'
                  );
                }
              );
			  
			  $('#dynamic .wrapper').children().eq($('#dynamic .wrapper').children().size() - 1).append(
                    '<li class="back" style="width:400px; position:absolute; left:' + '380' + 'px; top:' + '0' + 'px;' + '">' +
                      ('<a href="' + 'javascript:void(0)' + '">') +
					 '< BACK' +
                      '</a></li>'
                  ).click(function(){
					$('#dynamic .wrapper').children().css({display:'none'});
                  	$('#dynamic .wrapper').children('ul:eq(0)').css({display:'block'});
					});

            }

	      }
        );

        //!- add hover animation
        $('#tab').hover(
          function(){
	        $(this).find('div.wrapper').animate({height:'show'}, 'fast', 'swing',
			function(){
                //$('#dynamic .wrapper').children('ul:eq(0)').css({opacity:0.7});
              }
			);
	      },
	      function(){
		    $(this).find('div.wrapper').animate(
              {height:'hide', opacity:'hide'}, 'fast', 'swing',
              function(){
                $('#dynamic .wrapper').children('ul').css({display:'none'});
                $('#dynamic .wrapper').children('ul:eq(0)').css({display:'block'});
              }
            );
	      }
        );

	  }, "xml"
    );
});