var footerOffSet = 10;

var navDetails = {
    frameId: "ifraContent",    
    topImgId: "topImg",
    divTopImgHomeId: "divTopImgHome",
    divTopImgNonHomeId: "divTopImgNonHome",
    imgPath: "images/",
    currentSourceId: "none",
    loadingSource: "loading.htm",
    firstTime: true,
    fadeDelay: 300,
    currentFrameHeight: 0, 
    frameSource: [
        {   
            id: "inicio",         
            url: "Inicio.aspx",
            title: "Iglesia Metodista El Remanente",
            img: ""
        },        
        {    
            id: "nosotros",
            url: "Nosotros.aspx",
            title: "El Remanente - Nosotros",
            img: "topNosotros.jpg"                    
            
        },
		{    
            id: "pastor",
            url: "Pastor.aspx",
            title: "El Remanente - Pastor",
            img: "topNosotros.jpg"                    
            
        },
        {
            id: "ministerios",
            url: "Ministerios.aspx",
            title: "El Remannte - Ministerios",
            img: "topMinisterios.jpg"
        },
        {
            id: "radiotv",
            url: "RadioTV.aspx",
            title: "El Remannte - Radio & TV",
            img: "topRadioTV.jpg"
        },
        {
            id: "calendario",
            url: "Calendario.aspx",
            title: "El Remannte - Calendario",
            img: "topCalendario.jpg"
        },        
        {
            id: "contacto",
            url: "Contacto.aspx",
            title: "El Remannte - Contacto",
            img: "topContacto.jpg"
        },        
        {
            id: "fotos",
            url: "Fotos.aspx",
            title: "El Remannte - Fotos",
            img: "topFotos.jpg"
        },
        {
            id: "devocionales",
            url: "Devocionales.aspx",
            title: "El Remannte - Devocionales",
            img: "topDevocionales.jpg"
        }
    ],
   setFrameSource: function(sourceId) {   
      if (this.currentSourceId == sourceId) return;
      
      // FOR FEATURES UNDER CONSTRUCTION //////////////////////////////////      
      switch (sourceId) {
         case "ministerios": 
            this.uc();
            return;           
            break;
         
         case "calendario":
            this.uc();
            return;           
            break;
         
      }
      // //////////////////////////////////////////////////////////////////      
      var ctrl = document.getElementById(this.frameId);
      if (ctrl == null) return; 
      
      // fade div out      
      if (!this.firstTime) {      
         fade("divFade", 100, 0, this.fadeDelay);
      }
      window.setTimeout("navDetails.setFrameSource2('" + sourceId + "');", this.fadeDelay);
          
   },
   setFrameSource2: function(sourceId) {
      var ctrl = document.getElementById(this.frameId);
      if (ctrl == null) return;
      
      // get index of source to show
      var index = 0;
      for (var i=0; i<this.frameSource.length; i++) {
         if (this.frameSource[i].id == sourceId) {
            index = i;
            break;
         }
      }
      // set the title of the page
      if (document.title) document.title = this.frameSource[index].title;

      // update the current page index
      // the dontRedirect parameter is used to redirect to main.aspx when the client
      // requests a page directly, as in "remanenteusa.com/nosotros.aspx". When that
      // happens, dontRedirect is null and the page is redirected to main.aspx      
      this.currentSourceId = this.frameSource[index].id; 
      
      // change the source of the frame
      ctrl.src = this.frameSource[index].url + "?dontRedirect=1";
   },
   
   uc: function() {
      window.alert("Esta seccion esta en construccion. Por favor trate despues.");
   }
}                

function initPage() {   
   var source = "inicio";
   var hddn = document.getElementById("hddnPageToShow");
   if (hddn != null && hddn.value != "") 
      source = hddn.value;
    
   navDetails.setFrameSource(source);
}            

function setFrameHeight(gradually) {                       
    var contentFrame = document.getElementById(navDetails.frameId);                        
    var contentFrameDoc = null;                                                                                      
    
    contentFrameDoc = frames[navDetails.frameId];            
    
    if (contentFrameDoc != null) {
        contentFrameDoc = contentFrameDoc.document;
    }
    else {
        // FireFox                
        var framesCol = document.getElementsByTagName('iframe');
        alert("firefox");                
        for (var i=0; i<framesCol.length; i++) {
            if (framesCol[i].id == navDetails.frameId) {
                contentFrameDoc = framesCol[i].contentDocument;
                break;
            }
        }
    }
    
    if (contentFrame == null || contentFrameDoc == null) {
        alert("contentFrame: " + contentFrame + ", contentFrameDoc: " + contentFrameDoc);
        return;
    }
              
    //contentFrame.style.height = (contentFrameDoc.body.clientHeight + footerOffSet) + "px";  
    // set the frame height gradually... 
    var h = (contentFrameDoc.body.clientHeight + footerOffSet);     
    if (gradually)        
      changeHeightGradually(navDetails.frameId, navDetails.currentFrameHeight, h, navDetails.fadeDelay);
    else 
      changeHeight(navDetails.frameId, h);     
    
    navDetails.currentFrameHeight = h;
}

function changeHeightGradually(id, hStart, hEnd, millisec) { 
   //speed for each frame 
   var speed = Math.round(millisec / 100); 
   var timer = 0; 
   var height = 0;   
   var diff = Math.abs(hEnd - hStart);
   var incr = 1;
   
   if (diff < 200) 
      incr = 2;
   else if (diff < 400) 
      incr = 3;
   else if (diff < 800)
      incr = 5;
   else if (diff < 1000)
      incr = 15;      
   else 
      incr = 20;
      
   // testing purposes
   //document.title = "diff: " + diff + ", incr: " + incr;

   // determine the direction for the blending, if start and end are the same nothing happens
   if(hStart > hEnd) { 
      for(i = hStart; i >= hEnd; i-=incr) { 
         height = (i >= hEnd ? i : hEnd); 
         setTimeout("changeHeight('" + id + "'," + height + ");",(timer * speed)); 
         timer++; 
      } 
   } 
   else if(hStart < hEnd) { 
      for(i = hStart; i <= hEnd; i+=incr) { 
         height = (i <= hEnd ? i : hEnd);
         setTimeout("changeHeight('" + id + "', " + height + ");",(timer * speed)); 
         timer++; 
      } 
   } 
} 

function changeHeight(id, height) {   
   document.getElementById(id).style.height = height + "px";                  
   //navDetails.currentFrameHeight = height;      
}

function nav(to) {    
   navDetails.setFrameSource(to);     
}

function setPlaceHolder() {
   var namePlaceHolder = "Nombre Completo";
   var emailPlaceHolder = "Email";     
} 

function switTopImg() {
   var index = 0;
   for (var i=0; i<navDetails.frameSource.length; i++) {
      if (navDetails.frameSource[i].id == navDetails.currentSourceId) {
         index = i;
         break;
      }
   }
   var topImg = document.getElementById(navDetails.topImgId);
   var divTopImgHome = document.getElementById(navDetails.divTopImgHomeId);      
   var divTopImgNonHome = document.getElementById(navDetails.divTopImgNonHomeId);
   
   if (topImg != null && navDetails.frameSource[index].img != "") {          
      // show non-home page
      topImg.src = navDetails.imgPath + navDetails.frameSource[index].img;         
      if (divTopImgHome != null) divTopImgHome.style.display = "none";
      if (divTopImgNonHome != null) divTopImgNonHome.style.display = "";                         
   }
   else {         
      // show home page div        
      if (divTopImgHome != null) divTopImgHome.style.display = "";
      // hide non-home div
      if (divTopImgNonHome != null) divTopImgNonHome.style.display = "none";
   }
}

function childFrameReturn() {      
   // change top image
   switTopImg();
   // fade into the div
   fade("divFade", 0, 100, navDetails.fadeDelay);   
   // adjust height of the child frame to fit its contents
   setFrameHeight(false); //!navDetails.firstTime);      
   // flag this isn't the first time
   if (navDetails.firstTime) {
      navDetails.firstTime = false;
   }  
}


function fade(id, opacStart, opacEnd, millisec) { 
   //speed for each frame 
   var speed = Math.round(millisec / 100); 
   var timer = 0; 

   //determine the direction for the blending, if start and end are the same nothing happens 
   if(opacStart > opacEnd) { 
      for(i = opacStart; i >= opacEnd; i--) { 
         setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); 
         timer++; 
      } 
   } 
   else if(opacStart < opacEnd) { 
      for(i = opacStart; i <= opacEnd; i++) { 
         setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed)); 
         timer++; 
      } 
   } 
} 

//change the opacity for different browsers 
function changeOpac(opacity, id) { 
    var object = document.getElementById(id).style; 
    object.opacity = (opacity / 100); 
    object.MozOpacity = (opacity / 100); 
    object.KhtmlOpacity = (opacity / 100); 
    object.filter = "alpha(opacity=" + opacity + ")"; 
}