// File: readXML.js
//contentXml;
//catalogXml;

var newWindow = null;
var indx = 0;

var isPad = navigator.userAgent.match(/iPad/i) != null;
var isPhone = navigator.userAgent.match(/iPhone/i) != null;

function popWindow(URLtoOpen, orient) {


if (orient=="horz") {
	newWindow=window.open(URLtoOpen, "window"+indx++, "height=725,width=850,innerHeight=725,innerWidth=850,resizable=yes,toolbar=no,location=no,status=no,scrollbars=yes,menubar=no"); 

} else if (orient=="vert") {
	newWindow=window.open(URLtoOpen, "window"+indx++, "height=875,width=700,innerHeight=875,innerWidth=700,resizable=yes,toolbar=no,location=no,status=no,scrollbars=yes,menubar=no"); 

};
		
};


// Start function when DOM has completely loaded 
function ParseCatalog(sectionNames) {

    $("#ContentArea").empty();
                
    $.get("catalog.xml",{},function(xml){
        
        catalogXml = xml;//$(this); 
    
        // Open the students.xml file
        $.get("content.xml",{},function(sectionsXML){
            
            
    
            jQuery.each(sectionNames, function(i, sectionName) {
    
            //console.log(i);
            //console.log(sectionName);

      	
                //$("#ContentArea").append('FOUND <br>');
                // Build an HTML string
                myHTMLOutput = ''; 
                console.log(i);
                console.log("name "+sectionName);
                // Run the function for each student tag in the XML file
                $('section',sectionsXML).each(function() {
                    if (sectionName==$(this).children("name").text()) {
                        sectionXML = $(this);
                        tableData = BuildThumbTable(sectionXML);
                        myHTMLOutput += tableData;
                    };
                });
		
                // Update the DIV called Content Area with the HTML string
                $("#ContentArea").append(myHTMLOutput);
                
            });
        });
    
    }); // end catalog load
    
    
};
 
 
 function BuildThumbTable(sectionXml){

  //$("#ContentArea").append(' SECTION <br>');
    tableOutput = '<table width=100% border="0" cellpadding="5" cellspacing="0" align="left" valign="middle">';  
    tableOutput += '<tr align="left">';

    sectionName = sectionXml.children("name").text();
   
    tableOutput += '<td width = 100% style="vertical-align:middle">';
    $('cells',sectionXml).each(function() { 
        cellsXML = $(this);
        
        //$("#ContentArea").append('   CELLS <br>');
        $('cell',cellsXML).each(function() {
            
            //$("#ContentArea").append('     CELL  <br>');
            cellType = $(this).children("type").text();
            content = $(this).children("content");
            thumbUrl = content.children("image").text();
            itemLink = content.children("itemLink").text();
            cellData = BuildCellHtml(cellType, itemLink, thumbUrl);
            tableOutput += cellData;
            
        });
    });

    tableOutput += '</td>';
    //tableOutput += '<td width = 100%>';
    tableOutput += '</tr>';
    tableOutput += '</table>';
 
    return tableOutput;
 };
 
 function BuildCellHtml(cellType, itemLink, thumbUrl){

	// Build HTML string and return
    
    itemData = itemLink.split(".");
    imageType = itemData[0];
    imageName = itemData[1];
    pageCount = 0;
    
    //
    
    imageUrl = [];
    type = [];
    
    // LOOK UP CATALOG DATA
    $('group',catalogXml).each(function() { 
        groupName = $(this).children("name").text();
		if (groupName == imageType) {
            groupXML = $(this);
            $('item',groupXML).each(function() { 
                itemXML = $(this);
                //$("#ContentArea").append("ITEM");
                if (itemXML.children("name").text()==imageName) {
                    imageGroup = groupName;
                    //$("#ContentArea").append("MATCH");
                    pagesXML = itemXML.children("pages");
                    $('page',pagesXML).each(function() {
                        if (pageCount==0) { // stop at first for now
                            orientation = $(this).attr("orient");
                            if (orientation==undefined) orientation = "horz";
                            imageTitle = $(this).find("title").text();
                            date = $(this).find("date").text();
                            media = $(this).find("media").text();
                            width = $(this).find("width").text();
                            height = $(this).find("height").text();
                        }
                        
                        imageUrl[pageCount] = $(this).find("imageUrl").text();
                        type[pageCount] = $(this).attr("type");
                            
                        pageCount++;
                        //break;
                    });
                };
            });
        };
    });
        
    popupURL = "popup.php?title0="+escape(imageTitle)+"&date0="+date+"&media0="+escape(media)+"&width0="+width+"&height0="+height+"&orient0="+orientation+"&index="+0+"&totalPages="+pageCount;
    
    for (var n=0; n<pageCount; n++) {
        popupURL += "&type"+n+"="+type[n];
        popupURL += "&imageUrl"+n+"="+escape(imageUrl[n]);
    }
        
	cellOutput = '';
	//cellOutput += '<td><a href="javascript:popWindow(\''+ popupURL +'\',\''+orientation+'\')" target="_top"><img src='+thumbUrl+'></a></td>';
    cellOutput += '<a class="imgcell" href="'+popupURL +'" target="_blank"><img border=3 bordercolor=#0 src='+thumbUrl+'></a>';

	return cellOutput;
}