//////////////////////////
// main
//////////////////////////
var mf;	// handle to the medium iframe (initialised onload())

///////////////////////////
function SetupIndex() {
///////////////////////////

 // setup medium iframe
 var m_iframe = '<iframe src="ext/html/medium.html" id="mediumiframe" name="mediumiframe" frameborder="no" scrolling="auto"></iframe>';
 document.getElementById('mediumiframe_span').innerHTML = m_iframe;

 // show thumbnails
 SetupIFrames( smallPos );

 // set handle to the medium iframe
 mf = this.frames['mediumiframe'];

 // set keyboard handler
 document.onkeydown = ImageBrowsingKeydownHandlerIndex;

 // set document title
 document.title = title.replace(/(<([^>]+)>)/ig,"");

 // write status message
 window.status = 'This is a Porta photo album. Use the left and right arrow keys to navigate.';
 
 // go to light box if specified    
 //var url = window.location.href;
 //var show_lightbox = (url.indexOf("?lightbox")!=-1);
 //if (show_lightbox) {
 	
 //	DisplayLightbox();
 //}    
}

//////////////////////////
function ImageBrowsingKeydownHandlerIndex( e ) {
//////////////////////////

 ImageBrowsingKeydownHandler( e, mf );
}


///////////////////////////
function EnlargeImageInLightbox( i ) {
///////////////////////////

 // delete selection to avoid display artefacts
 if (self.getSelection)  {
     self.getSelection().removeAllRanges();
 } else if (document.selection) {
     document.selection.clear();
 }

 mf.ShowImage( i, 0  );
 document.getElementById('mainlayer').style.visibility = 'visible';
 document.getElementById('lightboxlayer').style.visibility = 'hidden';
}

///////////////////////////
function DisplayLightbox() {
///////////////////////////

 // hide the main layer and show the lightbox
 document.getElementById('mainlayer').style.visibility = 'hidden';
 document.getElementById('lightboxlayer').style.visibility = 'visible';

 // unload small images elements in the mainlayer
 SetupIFrames( 'none' );

 // register and render light box links
 mf.clinks_href  = new Array();
 mf.clinks_txt   = new Array();
 mf.clinks_href.push('javascript:parent.DisplayLightbox()');
 mf.clinks_txt.push( ls_lightbox );
 mf.clinks_href.push('javascript:parent.HideLightbox()');
 mf.clinks_txt.push( ls_albumview );
 mf.RenderCtrlLinks();

 // write title and link
 document.getElementById('title_lb').innerHTML = title;
 document.getElementById('ctrllinks_lb').innerHTML = '<a class="control" href="javascript:HideLightbox()">'+ls_albumview+'</a>';

 // write thumbnails
 var border = 14;
 var html = '';
 for (i=0;i<nbImages;i++) {

     var hfill    = maxSmallW-smallWidth[i];
     var vfill    = maxSmallH-smallHeight[i];
     var m_left   = border + Math.floor( hfill/2 );
     var m_right  = border + Math.ceil ( hfill/2 );
     var m_top    = border + Math.floor( vfill/2 );
     var m_bottom = border + Math.ceil ( vfill/2 );

     var mac = majorCaption[i].replace( /"/g,    '&quot;' );
     var re  = /<\S[^>]*>/g;
     mac = mac.replace(re,""); // strip html

     html += '<a href="javascript:EnlargeImageInLightbox('+i+')">';
     html += '<img style="display: inline; padding: 0px; border: 0px solid black; ';
     html += 'margin-left: '+m_left+'px; margin-right:'+m_right+'px; ';
     html += 'margin-top:'+m_top+'px; margin-bottom:'+m_bottom+'px;" ';
     html += 'src="'+smallDir+'/'+imageFilename[i]+'" ';
     html += 'width="'+smallWidth[i]+'" ' ;
     html += 'height="'+smallHeight[i]+'" ' ;
     html += 'galleryimg="no" title="'+mac+'" alt="'+mac+'" />';
     html += '</a> ';
 }
 document.getElementById('images_lb').innerHTML = html;

 // write footer
 document.getElementById('footer_lb').innerHTML = PortaMagicFooter(footer);
}

///////////////////////////
function HideLightbox() {
///////////////////////////

 // unload lightbox images to conserve memory
 document.getElementById('images_lb').innerHTML = '';

 // turn on small images in the main layer
 SetupIFrames( smallPos );

 // unregister links
 mf.clinks_href  = new Array();
 mf.clinks_txt   = new Array();
 mf.RenderCtrlLinks();

 // hide lightbox and show the main layer
 document.getElementById('mainlayer').style.visibility = 'visible';
 document.getElementById('lightboxlayer').style.visibility = 'hidden';
}

//////////////////////////
function SetupIFrames( smallPosSetting ) {
//////////////////////////

 // access medium iframe style
 var stym = document.getElementById('mediumiframe').style;

 // stuff required for the nasty ie workaround....
 // (which to make matters worse requires to use the xml prolog stunt 
 //  to switch ie into quirks mode in order to use the faulty box model)
 var isIE = (navigator.userAgent.toLowerCase().indexOf("msie") != -1);
 var isOpera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
 isIE = isOpera ? true : isIE; // treat Opera as IE

 if (smallPosSetting=='none') {

     // empty iframe
     document.getElementById('smalliframe_span').innerHTML = '';
                  	
     // set the main content to fill the browser
     stym.left   = '0px';
     stym.top    = '0px';
     stym.padding = '0px 0px 0px 0px';
     if (isIE) {

         stym.height = '100%';
         stym.width  = '100%';
     } else {

         stym.bottom = '0px';
         stym.right  = '0px';
     }
     stym.visibility = 'visible';
     return;
 }

	// write the small iframe
 var s_iframe = '<iframe src="ext/html/small.html" id="smalliframe" name="smalliframe" frameborder="no" scrolling="auto"></iframe>';
 document.getElementById('smalliframe_span').innerHTML = s_iframe;

	// size and position iframes
 var sty  = document.getElementById('smalliframe').style;
 var scrollbarsize = 16;		 // ugly pragmatic stuff
 var marginsize = 2*1+2*3+10; // ugly pragmatic stuff
 var space = isIE ? 15 : 10;  // ugly pragmatic stuff
 var w = parseInt(maxSmallW+scrollbarsize+marginsize+space)+'px';
 var h = parseInt(maxSmallH+scrollbarsize+marginsize)+'px';
 stym.top    = '0px';
 stym.left   = '0px';
 if (isIE) {

     stym.height = '100%';
     stym.width  = '100%';
 } else {

     stym.bottom = '0px';
     stym.right  = '0px';
 }
 switch (smallPosSetting) {

     case 'top':     sty.left    = '0px';
                     sty.top     = '0px';
                     sty.width   = '100%';
                     sty.height  = h;

                     if (isIE) {

                         stym.paddingTop = h;
                     } else {

                         stym.top    = h;
                     }
                     break;

     case 'bottom':  sty.left    = '0px';
                     sty.bottom  = '0px';
                     sty.width   = '100%';
                     sty.height  = h;

                     if (isIE) {

                         stym.paddingBottom = h;
                     } else {

                         stym.bottom = h;
                     }
                     break;

     case 'right':   sty.right   = '0px';
                     sty.top     = '0px';
                     sty.width   = w;
                     sty.height  = '100%';

                     if (isIE) {

                         stym.paddingRight = w;
                     } else {

                         stym.right  = w;
                     }

                     break;

     case 'left':
     default:        sty.left    = '0px';
                     sty.top     = '0px';
                     sty.width   = w;
                     sty.height  = '100%';

                     if (isIE) {

                         stym.paddingLeft = w;
                     } else {

                         stym.left = w;
                     }
                     break;
  }
  sty.visibility  = 'visible';
  stym.visibility = 'visible';
}