var navi_frame;
var bigview_frame;

function selectImage( image_id){
    var frame_s  = eval( "this." + preview);
    var pane_s = frame_s.document;
    var cell_id;

    for(i = 0; i < imageList.length; i++){
        cell_id = "cell"+i;
        if( i == image_id){
            frame_s.document.getElementById( cell_id).style.backgroundColor  = high_color;
        }
        else{
            frame_s.document.getElementById( cell_id).style.backgroundColor  = low_color;
        }
    }
    
    var frame_b  = eval(  "this." + bigview);
    var pane_b = frame_b.document.open("text/html","replace");
    single_image = imageList[image_id];

    pane_b.writeln("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">");    
    pane_b.writeln("<html xmlns=\"http://www.w3.org/1999/xhtml\">");
    pane_b.writeln("<head>");
    
    pane_b.writeln("<meta http-equiv=\"content-type\" content=\"text/html; charset=iso-8859-1\"/>");
    pane_b.writeln("<link rel=\"stylesheet\" type=\"text/css\" href=\""+ layout +"/SideStyle.css\"/>");
    pane_b.writeln("<title>image navigation page</title>");
    pane_b.writeln("</head>");
    pane_b.writeln("<body>");

    pane_b.writeln("<table align=\"center\">");
    pane_b.writeln("<tr><td>");

    if( image_id == 0)
        pane_b.writeln("<img src=\""+ layout +"/arrow-left.gif\" alt=\"zurück\" onClick=\"javascript:parent.selectImage("+(imageList.length-1)+")\"></td>");
    else
        pane_b.writeln("<img src=\""+ layout +"/arrow-left.gif\" alt=\"zurück\" onClick=\"javascript:parent.selectImage("+(image_id-1)+")\"></td>");

    pane_b.writeln("<td width=\"396px\" class=\"imagedescript\"><span style=\"color: black;\">"+single_image[0]+"</span></td>");
    if( image_id == imageList.length - 1)
        pane_b.writeln("<td><img src=\""+ layout +"/arrow-right.gif\" alt=\"vor\" onClick=\"javascript:parent.selectImage(0)\">");
    else
        pane_b.writeln("<td><img src=\""+ layout +"/arrow-right.gif\" alt=\"vor\" onClick=\"javascript:parent.selectImage("+(image_id+1)+")\">");

    pane_b.writeln("</td></tr>");
    pane_b.writeln("</table>");

    pane_b.writeln("<table align=\"center\">");

        
        pane_b.writeln("<tr><td>");
        if( image_id < imageList.length -1){
            pane_b.writeln("<img src=\""+relativeImagePath+single_image[2]+"\" alt=\""+single_image[0]+"\" onClick=\"javascript:parent.selectImage("+(image_id+1)+")\">"); /**/
        }
        else{
            pane_b.writeln("<img src=\""+relativeImagePath+single_image[2]+"\" alt=\""+single_image[0]+"\" onClick=\"javascript:parent.selectImage("+0+")\">"); /**/
        }
        pane_b.writeln("</td></tr>");

        pane_b.writeln("<tr><td>");
        pane_b.writeln("<a onClick=\"javascript:parent.standalone()\">im Zusatzfenster öffnen ...</a>"); /**/
        pane_b.writeln("</td></tr>");
    
    pane_b.writeln("</table>");
    pane_b.writeln("</body>");
    pane_b.writeln("</html>");
    pane_b.close();

}

function writeNavigation( framename){
    var single_image;
    var frame_n  = eval( "this." + preview);
    var pane_n = frame_n.document.open("text/html","replace");

    pane_n.writeln("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">");    
    pane_n.writeln("<html xmlns=\"http://www.w3.org/1999/xhtml\">");
    pane_n.writeln("<head>");
    
    pane_n.writeln("<meta http-equiv=\"content-type\" content=\"text/html; charset=iso-8859-1\"/>");
    pane_n.writeln("<link rel=\"stylesheet\" type=\"text/css\" href=\""+ layout +"/SideStyle.css\"/>");
    pane_n.writeln("<title>image preview page</title>");
    pane_n.writeln("</head>");

    pane_n.writeln("<body>");

    pane_n.writeln("<table align=\"center\">");

    for(i = 0; i < imageList.length; i++){
        single_image = imageList[i];
        if( i == 0){
            pane_n.writeln("<tr><td id=\"cell"+i+"\" width=\""+td_size+"\" height=\""+td_size+"\" style=\"background-color:"+high_color+"\">");
        }
        else{
            pane_n.writeln("<tr><td id=\"cell"+i+"\" width=\""+td_size+"\" height=\""+td_size+"\">");
         }
        pane_n.writeln("<img src=\""+relativeThumbPath+single_image[2]+"\" alt=\""+single_image[0]+"\" onClick=\"javascript:parent.selectImage("+i+")\">");
        pane_n.writeln("</td></tr>");
    }
    
    pane_n.writeln("</table>");
    pane_n.writeln("</body>");
    pane_n.writeln("</html>");
    pane_n.close();

    var frame_b2  = eval(  "this." + bigview);
    var pane_b2 = frame_b2.document.open("text/html","replace");
    single_image = imageList[0];
    pane_b2.writeln("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">");    
    pane_b2.writeln("<html xmlns=\"http://www.w3.org/1999/xhtml\">");
    pane_b2.writeln("<head>");
    
    pane_b2.writeln("<meta http-equiv=\"content-type\" content=\"text/html; charset=iso-8859-1\"/>");
    pane_b2.writeln("<link rel=\"stylesheet\" type=\"text/css\" href=\""+ layout +"/SideStyle.css\"/>");
    pane_b2.writeln("<title>image navigation page</title>");
    pane_b2.writeln("</head>");
    pane_b2.writeln("<body>");
    pane_b2.writeln("<table align=\"center\">");
    pane_b2.writeln("<tr><td>");
    pane_b2.writeln("<img src=\""+ layout +"/arrow-left.gif\" alt=\"zurück\" onClick=\"javascript:parent.selectImage("+(imageList.length-1)+")\"></td>");
    pane_b2.writeln("<td width=\"396px\" class=\"imagedescript\"><span style=\"color: black;\">"+single_image[0]+"</span></td>");
    pane_b2.writeln("<td><img src=\""+ layout +"/arrow-right.gif\" alt=\"vor\" onClick=\"javascript:parent.selectImage(1)\">");
    pane_b2.writeln("</td></tr>");
    pane_b2.writeln("</table>");
    pane_b2.writeln("<table align=\"center\">");

        
        pane_b2.writeln("<tr><td>");
        pane_b2.writeln("<img src=\""+relativeImagePath + single_image[2]+"\" alt=\""+single_image[0]+"\"  onClick=\"javascript:parent.selectImage(1)\" >"); /**/
        pane_b2.writeln("</td></tr>");
        
        pane_b2.writeln("<tr><td>");
        pane_b2.writeln("<a onClick=\"javascript:parent.standalone()\">im Zusatzfenster öffnen ...</a>"); /**/
        pane_b2.writeln("</td></tr>");

    pane_b2.writeln("</table>");
    pane_b2.writeln("</body>");
    pane_b2.writeln("</html>");
    pane_b2.close();
}


function standalone(){
        var win = window.open("index.html","picture","width=1024,height=768,left=0;top=0");
        win.focus();
}
