var COLS = parseInt(4);
var ROWS = parseInt(3);
var xmlDoc;
var imageList;
dojo.require("dojo.collections.*");
dojo.require("dojo.html");
dojo.require("dojo.logging.Logger");
//dojo.require("dojo.widget.Rounded");
//dojo.require("dojo.lfx.html");
//dojo.require("dojo.widget.*");


var bindArgs = {
    url:        IMAGES_FILE,
    mimetype:   "text/xml",
    error:      function(type, errObj){
        // handle error here
        //alert("Err: " + errObj + "\n" +
        //      "Type: " + type);
    },
    load:      function(type, data, evt){
        // handle successful response here
        //alert("Data: " + data + "\n" +
        //      "Type: " + type + "\n" +
        //      "Event: " + evt);

        xmlDoc = data;

	imageList = getImages( xmlDoc );

        printGallery( 1 );

    }
};


function preLoadImages() {

    var text="";
    var preloadSection = dojo.byId("preload");

    for (var i=0; i<imageList.count; i++) {

        var largeImg = imageList.item(i).getAttribute("image");
        preloadSection.innerHTML += '<img src="Images/Large/Lg_' + largeImg + '"/>';
    }

    //preloadSection.innerHTML=text;

}

    function getImages(xmlDoc) {

        var arrayList = new dojo.collections.ArrayList();
        var elements = xmlDoc.firstChild.childNodes;

        for (var i=0; i<elements.length; i++) {
            if ( elements[i].nodeName == "image" || elements[i].nodeName == "img" ) {
                arrayList.add( elements[i] )
            }
        }
        return arrayList;

    }

    function testExplode(start, blowup){

        if ( blowup == null ) {
            blowup = start.getAttribute("blowup");
        }

        var page = start.getAttribute("page");
        updateWindow(blowup, page);
        
        if ( dojo.byId ( "window" ) != null ) {
            dojo.lfx.explode(start, "window", 250).play();
        }

    }

    function testImplode(start, blowup){
	
        if ( dojo.byId ( "window" ) != null ) {
            dojo.lfx.implode( "window", start, 250).play();
        }

    }

    function printGallery( page ) {

        // refresh paging
        printPaging(imageList.count, page);

        var gallery = dojo.byId("gallery");
        
        content = "<table border=0 cellspacing=3 cellpadding=3 width=800><tr>";

        var i = page * (COLS*ROWS) - (COLS*ROWS);
        colwidth = 100 / COLS;

        for (var imgs=0; i<imageList.count && imgs < (COLS*ROWS); i++) {

            imgs++;
            explodeId = "explode-" + imgs;
            var title = imageList.item(i).getAttribute("title");
            var smallImg = imageList.item(i).getAttribute("image");
            var sold = imageList.item(i).getAttribute("sold");

            content += '<td align=center valign=center class=bodytext width="' + colwidth + '%">';
            content += '<table><tr><td>';
            if ( sold != null && sold == "yes" ) {
                //content += '<div style="position:relative; top:30; left:10; color:#cc0000; font-size:1.5em"><b>SOLD</b></div>';
            }
            //content += '</td><td>';
            // commenting out <a> link
            //content += '<a class="thumb" id="thumb-' + imgs + '" href="javascript:;" onclick="testExplode(this)" blowup="' + imgs + '" page="' + page + '">';
            //content += '<img src="Images/Small/Sm_' + smallImg + '" alt="' + title + '"/>';
            //content += '</a>';
            content += '<img id="thumb-' + imgs + '" src="Images/Small/Sm_' + smallImg + '" alt="' + title + '" onclick="testExplode(this)" blowup="' + imgs + '" page="' + page + '" style="cursor:pointer">';
            //content += '</td><td>';
            if ( sold != null && sold == "yes" ) {
                //content += '<div style="position:relative; top:-30; left:-10; color:#cc0000; font-size:1.5em"><b>SOLD</b></div>';
            }            content += '</td></tr>';
            content += '</table>';

            content +='</td>\n'
            

            if ( (imgs % COLS) == 0 ) {
                content += "</tr><tr>";
            }
        }

        content += "</tr></table>";
        
        gallery.innerHTML = content;



    }

    function next( caller ) {

        var blowup = caller.getAttribute("blowup");
        var nextId = (1*blowup+1);
        var source = dojo.byId("thumb-"+blowup);
        var next = dojo.byId("thumb-"+nextId);
        testImplode( source );
        testExplode( next, nextId ); 

    }

    function previous( caller ) {

        var blowup = caller.getAttribute("blowup");
        var previousId = (1*blowup-1);
        var source = dojo.byId("thumb-"+blowup);
        var previous = dojo.byId("thumb-"+previousId);

        testImplode( source );

        testExplode( previous, previousId ); 

    }

    function updateWindow( imgs, page ) {

        var windowContent = dojo.byId("window-content");
        var i = page * (COLS*ROWS) - (COLS*ROWS) + (imgs*1) - 1;

        var title = imageList.item(i).getAttribute("title");
        var largeImg = imageList.item(i).getAttribute("image");
        var sold = imageList.item(i).getAttribute("sold");
        var ac = imageList.item(i).getAttribute("ac");

        // set window content
        var content = '<table border=1 cellpadding=10 cellspacing=0 width=450><tr><td bgcolor="#644E1C" align="center"> <!--// outside frame table -->';
        content += '<table cellpadding=0 cellspacing=0 border=0>';
        content += '<tr><td width="15%">';
        if ( sold != null && sold == "yes" ) {
            //content += '<div class="bodytext" style="position:relative; top:40; left:180; color:#cc0000;"><b>SOLD</b></div>';
            content += '<div class="bodytext" style="color:#cc0000; font-weight:bold;">SOLD</div>';
        } else if ( ac != null && ac == "yes" ) {
            content += '<div class="bodytext" style="color:#cc0000; font-weight:bold;">Artist Collection</div>';
        } 
        content += '</td>';
        content += '<td width="80%" align="center" class="bodytext">' + title + '<br/>';

        if ( imgs != 1 ) {
            content += '<a class="nav" onclick="previous(this)" blowup="' + imgs + '" style="cursor:pointer"><< previous</a>&nbsp;';
        }
        if ( imgs != (COLS*ROWS) && (i+1) != imageList.count ) {
            content += '&nbsp;<a onclick="next(this);" class="nav" blowup="' + imgs + '" style="cursor:pointer">next >></a>';
        }

        content += '</td>';
        content += '<td width="15%" align="right"><a href="javascript:;" class="nav" onclick="testImplode(this)">close</a></td>';
        content += '</tr>';
        content += '<tr><td align="center" colspan="3">';
        content += '<table border="1" bordercolor="black" cellpadding="0" cellspacing="0">';
        content += '<tr><td>'; // image border
        content += '<img src="Images/Large/Lg_' + largeImg + '" alt="' + title + '"/>';
        content += '</td></tr></table>';
        content += '</td></tr>';
        content += '</table>';
        content += '</td></tr></table> <!--// outside frame table -->';

        windowContent.innerHTML=content;

    }

    function printPaging( count, currentPage ) {

        var pagingTop = dojo.byId("paging-top");
        var pagingBottom = dojo.byId("paging-bottom");
        var pageNum = parseInt(count) / parseInt(COLS*ROWS);

        var content = "";
        
        content += "<table width='100%' border=0><tr><td width='50%' align='left'>";


        if ( currentPage > 1 ) {
            content += "<a class='nav' href='javascript:refresh(" + (currentPage-1) + ")'><< previous</a>&nbsp;";
        }

        content += "</td><td width='50%' align='right'>";

        if ( currentPage < pageNum ) {
            content += "<a class='nav' href='javascript:refresh(" + (currentPage+1) + ")'>next >></a>";
        }

        content += "</td></tr></table>";

        pagingTop.innerHTML = content;
        pagingBottom.innerHTML = content;
        
        // commented out to just print (previous,next)
        //var page = 1;
        //for ( var i=0; i<count; i+=(COLS*ROWS) ) {

        //    paging.innerHTML += "<a class='nav' href='javascript:refresh(" + page + ")'>" + page + "</a>&nbsp;";            
        //    page++;

        //}

    }  


    function refresh(newPage) {
        printGallery( newPage );
        //var requestObj = dojo.io.bind(bindArgs);
    }

    // dispatch the request
    function load() {
       var requestObj = dojo.io.bind(bindArgs);
       setTimeout("preLoadImages()", 5000); // wait 5 seconds
    }