/*
    Dependancies:
        - dynImageInfo array, filled with names, pictures and state of the second layer.
        - dynSesssion array, filled with session width/height from server.
        - Call to lResolution.Calculate() upon initialization (could do dom ready..)
*/

var lResolution = {

    staticRequestObject     : null,
    staticResolutionWidth   : 0,
    staticResolutionHeight  : 0,
    staticResizeActive      : true,

    Calculate : function( forceWidth, forceHeight )
    {
        var sMode = new Array();
        var sWidth = 950;
        var sHeight = 700;
        sMode[0] = 4;
        sMode[1] = 5;

       
        
        if ( this.staticWidth == sWidth && this.staticHeight == sHeight )
        {
            return;
        }
        
        this.staticWidth   = sWidth;
        this.staticHeight  = sHeight;
        
        if ( typeof dynSesssion == 'undefined' )
        {
            this.ServerUpdate( sWidth, sHeight );
        }
        else if ( this.staticWidth != dynSesssion[0] || this.staticHeight != dynSesssion[1] )
        {
            dynSesssion[0]   = this.staticWidth;
            dynSesssion[1]   = this.staticHeight;
            
            if ( !this.ServerUpdate( sWidth, sHeight ))
            {
                // It seems like we have failed to inform the server.
                // return;
            }
        }
        
        if ( this.Manipulate( sWidth, sHeight ))
        {
            //lImage.List( sMode[0], sMode[1] );
            lImage.Pages( dynTotalPage, ( sMode[0] * sMode[1] ));
        }
    },
    
    Fetch : function( classFind )
    {
        var obj = document.getElementsByTagName("*");
        var i;
        
        for ( i = 0; i < obj.length; i++ )
        {
            if ( obj[i].className == classFind )
            {
               return obj[i]
            }
        }
        
        return null;
    },
    
    Manipulate : function( sWidth, sHeight )
    {
        var changeCalcPos       = new Array();
        var changeObj           = this.Fetch( "middencell" );
        
        changeObj.width         = sWidth;
        changeObj.height        = sHeight;
        changeObj.style.height  = sHeight;
        
        if (( changeObj = document.getElementById('js_AlterContent')) != null )
        {
            changeObj.height        = ( document.getElementById('js_AlterMe') == null ) ? ( sHeight - 239 ) : ( sHeight - 239 - 19 - 18 );
        }
        
        if (( changeObj = document.getElementById('js_BG')) != null || ( changeObj = document.getElementById('js_Homepage')) != null )
        {
            if ( typeof contactHeader != 'undefined' && contactHeader )
            {
                switch ( sWidth )
                {
                    case 1024:
                        changeObj.style.backgroundImage = 'url( /images/contentpaginas/bovenbalk1024.jpg )';
                        break;
                        
                    case 1152:
                        changeObj.style.backgroundImage = 'url( /images/contentpaginas/bovenbalk1280.jpg )';
                        break;
                        
                    default:
                        changeObj.style.backgroundImage = 'url( /images/contentpaginas/bovenbalk.jpg )';
                        break;
                }
            }
            else
            {
                switch ( sWidth )
                {
                    case 1024:
                        changeObj.style.backgroundImage = ( changeObj.id == 'js_Homepage' ) ? 'url( /images/homepage/heerkens1024.jpg )' : 'url( /images/productpage/header1024.jpg )';
                        break;
                        
                    case 1152:
                        changeObj.style.backgroundImage = ( changeObj.id == 'js_Homepage' ) ? 'url( /images/homepage/heerkens1280.jpg )' : 'url( /images/productpage/header1280.jpg )';
                        break;
                        
                    default:
                        changeObj.style.backgroundImage = ( changeObj.id == 'js_Homepage' ) ? 'url( /images/homepage/heerkens-gelukkig-warmte-mag-ook-mooi-zijn.jpg )' : 'url( /images/productpage/header.jpg )';
                        break;
                }
            }
        }
        
        if (( changeObj = document.getElementById('js_AlterMe')) != null )
        {
            changeObj.width         = Math.round(( 439 / 800 ) * sWidth  );
            changeObj.style.height  = Math.round(( 314 / 600 ) * sHeight );
            return true; 
        }
        
        return false;
    },
    
    Resize : function()
    {
        // By default, JavaScript events do not trigger before the page is fully loaded. Not a problem when you got just a few
        // images - thats really fast, but try caching 28 images, both thumbnail and full-sized. We will just make an active
        // check on dimensions and see if they've changed!
        
        if ( this.staticResizeActive )
        {
            setTimeout( 'lResolution.Resize()', 250 );
            this.Calculate();
        }
    },
    
    ServerNotifyChange : function()
    {
        // We aren't concidered to be in the same object when in a callback function, such as this one is - therefore,
        // access the control object directly with the name assigned to it rather then using your own name as this.

        try
        {
            if ( lResolution.staticRequestObject.readyState == 4 )
            {
                // Example return should be, if correct:
                // OK: 1024x768
                // alert( lResolution.staticRequestObject.responseText );
            }
        }
        catch( ex )
        {
            // Don't annoy the user with useless messages, but
            // we still need the catch statement for it to work.
        }
    },
    
    ServerUpdate : function( sWidth, sHeight )
    {
        if ( ! this.staticRequestObject )
        {
            try
            {
                this.staticRequestObject = new XMLHttpRequest();
            }
            catch( ex )
            {
                try
                {
                    this.staticRequestObject = new ActiveXObject("Microsoft.XMLHttp");
                }
                catch( ex )
                {
                    return false;
                }
            }
        }
        
        this.staticRequestObject.open('GET', '/Homepage.aspx?rnd=' + new Date().getTime() + '&js_Width=' + sWidth + '&js_Height=' + sHeight );
        this.staticRequestObject.onreadystatechange = this.ServerNotifyChange;
        this.staticRequestObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        this.staticRequestObject.send( null );
        return true;
    }
};

window.onresize = function()
{
    lResolution.staticResizeActive = false;
    lResolution.Calculate();
}

var lImage = {

    isIndex : 0,        // Index thats gonna be loaded after fading.
    myIndex : 0,        // Index that is currently active!
    isFading : false,   // Are we currently fadin'?
    
    ChildFlush : function( objTarget )
    {
        if ( objTarget.hasChildNodes() )
        {
            while ( objTarget.childNodes.length >= 1 )
            {
                objTarget.removeChild( objTarget.firstChild );
            } 
        }
    },

    List : function( fRows, fCols )
    {
        var displayPerRow   = ( !fRows ) ? 3 : fRows;
        var displayNumRow   = ( !fCols ) ? 4 : fCols;
        var displayCurrent  = 0;
        
        var writeMe         = document.getElementById('js_WriteMe');
        var table           = document.createElement('table')
        var div             = document.createElement('div');
        var img             = document.createElement('img');
        var tr              = document.createElement('tr');
        var td              = 0
        
        img.width           = '86';
        img.height          = '60';
        
        table.border        = '0';
        table.cellSpacing   = '3';
        table.cellPadding   = '0';
        
        div.appendChild(img);
        
        for( var i = 0; i < dynImageInfo.length; i++ )
        {
            if (( displayPerRow * displayNumRow ) == i )
            {
                break;
            }
            
            if ( displayCurrent == displayPerRow )
            {
                displayCurrent  = 0;
                table.appendChild( tr );
                tr              = document.createElement('tr');
            }
            
            td              = document.createElement('td');
            tr.height       = '60';
            td.vAlign       = 'top';
            td.width        = '86';

            img.alt         = dynImageInfo[i][0];
            img.src         = dynImageInfo[i][1];
            td.innerHTML    = '<div class="kleinfototje" onmousemove="lImage.Transform( this, ' + i + ', true )" onmouseout="lImage.Transform( this, ' + i + ', false )">' + div.innerHTML + '</div>';
            
            tr.appendChild( td );
            
            td              = 0
            displayCurrent  = displayCurrent + 1;
        }
        
        if ( td == 0 )
        {
            while( tr.childNodes.length < ( displayPerRow - 1 ))
            {
                td = document.createElement('td');
                tr.appendChild(td);
            }

            table.appendChild( tr );
        }

        this.ChildFlush(writeMe);
        writeMe.appendChild(table)
        
        if ( document.all )
        {
            writeMe.innerHTML = '<table border="0" cellspacing="5" cellpadding="0">' + writeMe.innerHTML + '</table>';
        }
    },
    
    Pages : function( totalCount, perPageCount )
    {
        var myPages     = Math.ceil( totalCount / perPageCount );
        var myRealPage  = ( dynTotalCurr == 0 ) ? 1 : ( Math.floor( dynTotalCurr / perPageCount ) + 1 );
        var myResponse  = '';
                
        if ( myPages == 0 )
        {
            myResponse = "Geen foto's beschikbaar";
        }
        else
        {
            if ( myPages == 1 )
            {
                lResolution.Fetch('paginering').innerHTML = '';
                return;
            }
                        
            for( var i = 1; i <= myPages; i++ )
            {
                if ( myRealPage == i )
                {
                    myResponse = myResponse + ' | <strong>' + i + '</strong>';
                }
                else
                {
                    myResponse = myResponse + ' | <a href="/p_' + hID + '_' + sID + '_' + i + '_' + (( i - 1 ) * perPageCount ) + '/heerkensopenhaarden/pagina' + i + '.html">' + i + '</a>';
                }              
            }
        }
        
        if ( myResponse != '' )
        {
            lResolution.Fetch('paginering').innerHTML = 'Pagina: ' + myResponse.substring(3);
        }
    },
    
    Modify : function( imgLoad, imgIndex, textIsWhite )
    {
        var changeObj;
        var isInit = false;
        
        if (( changeObj = document.getElementById('LayerNaam')) != null )
        {
            if ( changeObj.innerHTML == '&nbsp;' )
            {
                isInit = true;
            }
            
            if ( !isInit && imgIndex == this.myIndex )
            {
                return;
            }
            
            if ( this.isFading )
            {
                this.myIndex = imgIndex;         
            }
            
            changeObj.innerHTML = dynImageInfo[imgIndex][0];
            changeObj.style.color = textIsWhite ? '#FFFFFF' : '#000000';
        }
        
        if (( changeObj = document.getElementById( imgLoad )) != null )
        {
            if ( !lImage.isFading && !isInit )
            {
                lImage.isFading = true;
                setTimeout( 'lImage.isFading = false;', 900 );

                for( var i = 1; i <= 10; i++ )
                {
                    setTimeout( 'lImage.SetOpacity( \'' + imgLoad + '\', \'' + ( 100 - ( i * 10 )) + '\' );', ( i * 50 ));
                    setTimeout( 'lImage.SetOpacity( \'' + imgLoad + '\', \'' + ( i * 10 ) + '\' );', (( i * 50 ) + 510 ));
                }
            }
            
            lImage.isIndex = imgIndex;            
            
            if ( isInit )
            {
                this.SetImage( imgLoad );
            }
        }
        
        if (( changeObj = document.getElementById('LayerExtra')) != null )
        {
            changeObj.innerHTML = '&nbsp;';
            
            if ( dynImageInfo[imgIndex][4] != '0' )
            {
                if ( dynImageInfo[imgIndex][3] == '0' )
                {
                    dynImageInfo[imgIndex][3] = 'Klik hier voor meer informatie!';
                }
                
                changeObj.innerHTML = '<strong><center>' + (( dynImageInfo[imgIndex][4] != 0 ) ? ( '<a href="' + dynImageInfo[imgIndex][4] + '">' ) : '' ) + dynImageInfo[imgIndex][3] + (( dynImageInfo[imgIndex][4] != 0 ) ? '</a>' : '' ) + '</center></strong>';
            }
        }
        
        if (( changeObj = document.getElementById('LayerBrandend')) != null )
        {
            changeObj.style.visibility = (( dynImageInfo[imgIndex][2] == 0 ) ? 'hidden' : 'visible' );
        }
    },

    SetImage : function( imgLoad )
    {
        document.getElementById( imgLoad ).src = (( lResolution.staticResolutionWidth > 800 ) ? dynImageInfo[this.isIndex][1].replace('normaal', 'groot') : dynImageInfo[this.isIndex][1] );
    },
    
    SetOpacity : function( imgLoad, opacity )
    {
        var opacityInt      = parseInt( opacity );
        var opacityFloat    = parseFloat( opacity );
        
        opacityInt          = (( opacityInt   > 100 ) ? 100 : (( opacityInt   < 1 ) ? 1 : opacityInt   ));
        opacityFloat        = (( opacityFloat > 100 ) ? 100 : (( opacityFloat < 1 ) ? 1 : opacityFloat ));
        opacityFloat        = opacityFloat / 100;
        
        document.getElementById( imgLoad ).style.opacity    = ( opacityFloat );
        document.getElementById( imgLoad ).style.filter     = 'alpha(opacity=' + opacityInt + ')';
    
        if ( imgLoad == 'dynloadarea' && opacity == 0 )
        {
            this.SetImage( imgLoad );
        }
    },
    
    Transform : function( obj, objNum, objBool, textIsWhite )
    {
        if ( obj == null )
        {
            this.Modify( 'dynloadarea', objNum, textIsWhite );
            return;
        }
                    
        if ( objBool == true )
        {
            obj.style.backgroundColor = '#AD9A8C';
            this.Modify( 'dynloadarea', objNum, textIsWhite );
            return;
        }

        obj.style.backgroundColor = '#CFC5BB';
    }
};