/************************************************************
* xml.js - xmlの読み込み用
* 
* 株式会社たき工房 media extension | http://www.mex-net.jp/
************************************************************/

//"portfolio.xml"の読み込み
$(function(){
	$.ajax({
        url: "http://www.mex-net.jp/portfolio/portfolio.xml",
        type: "GET",
        dataType: "xml",
        timeout: 1000,
        cache: true,
        async: true,
        
        //エラー
        error: function(){
            alert("XMLファイルの読み込みに失敗しました");
        },
        
        //読み込み成功
        success: function(xml){
            parse_xml(xml);
			PortForioDetail();
        }
    });	
});

//HTMLにパース
function parse_xml(xml){
    $(xml).find("Work").each(function(){
        //記事リンク
        var work_title = $(this).find("Title").text();
        var work_tumb = $(this).find("Thumbnail").text();
        var work_file = $(this).find("File").text().replace("http://www.mex-net.jp/", "/");
        get_xml2(work_title, work_tumb, work_file);
		$("#Loading").remove();
    });
}

//変数の設定
var num = 1;
var timerID;

//"work_file"の読み込み
function get_xml2(work_title, work_tumb, work_file){
	
    $.ajax({
        url: work_file,
        type: "GET",
        dataType: "xml",
        timeout: 1000,
        cache: true,
        async: true,
        
        //エラー
        error: function(){
			$("#Loading").remove();
            alert("XMLファイルの読み込みに失敗しました");
            return false;
        },
        
        //読み込み成功
        success: function(xml){
            $(xml).find("Work").each(function(){
            
                //記事リンク
                var thumb_fileS = $(this).find("Thumbnail").text();
                var client = $(this).find("Client").text();
                var name = $(this).find("Name").text();
                var url = $(this).find("URL").text();
                var description = $(this).find("Description").text();
                var credit = $(this).find("Credit").text();
                var thumb_fileL = $(this).find("Images").text();
				var thumbIMG = thumb_fileL.split(",");
				var thumbNum = 0;
				
				//小サムネイル HTML
				var arr = [];
				var arr2 = [];
				for(var i in thumbIMG){
					arr.push("<div id='popUp"+num+"_"+thumbNum+"' class='panel'><img src='" + thumbIMG[i] + "' class='pic'></div>");
					arr2.push("<div class='panel'><a href='#popUp"+num+"_"+thumbNum+"'><img src='" + thumbIMG[i] + "' class='pic'></a></div>");
					thumbNum++;
				}
				if (work_title != "" && num<=12)
                //トップのサムネイルHTML
				$("<li></li>").html(
					"<dl>" +
					"<dt><a href='#popUp"+ num +"'>" + work_title + "</a></dt>" +
					"<dd><a href='#popUp"+ num +"'><img src='" + thumb_fileS + "'></a></dd>" +
					"</dl>"
				).appendTo("#PortForio > ol");
				
				//詳細のメインパネルHTML
				$("<div id='popUp"+ num +"' class='detailBox'></div>").html(
					"<div class='boxInner'>" +
					"<div class='stripViewer'><div class='panelContainer'>" + arr.join("") + "</div></div>" +
					"<div class='descriptBox'>" +
					"<div class='thumnail clearfix'>" + arr2.join("") + "</div>" +
					"<h3><a href='"+ url +"' target='_blank'>" + client +"<br>"+ name +"<br><span>"+ url +"</span></a></h3>"+
					"<div class='summary'>"+ description + credit +"</div>" +
					"<ul class='btnList'>" +
					"<li class='prevBtn'><a href='#popUp"+ (num-1) +"'><img src='images/btn_prev.gif'></a></li>" +
					"<li class='nextBtn'><a href='#popUp"+ (num+1) +"'><img src='images/btn_next.gif'></a></li>" +
					"</ul></div></div>"
				).appendTo("#PortForioDetail");

				num++;
            });
        }
    });
};