var Engine =
{
    loaded : function( event )
    {
        if( System.Cache["main_load"] < System.Cache["main_images"].length )
        {
            var strImage = System.Cache["main_images"][System.Cache["main_load"]];
            System.Cache["main_load"] += 1;
            
            var objImage = document.getElementById(strImage);
            System.Web.addEvent( objImage, "load", Engine.loaded );
            objImage.src = "engine/" + strImage + ".png";
        }
        else if( System.Cache["main_load"] == System.Cache["main_images"].length )
        {
            System.Cache["main_load"] += 1;
            
            if( System.Web.width() >= 920 )
                Engine.load_920();
            else if( System.Web.width() >= 580 )
                Engine.load_580();
            else
                Engine.load_420();
        }
        else if( !Engine.visible )
        {
            Engine.controls.face.style.display = "block";
            Engine.resize();
            document.getElementById("start").style.display = "none";
            Engine.visible = true;
        }
        else
        {
            Engine.controls.face.style.display = "block";
        }
    },
    
    click_gallery : function( event )
    {
        if( Engine.gallery_loaded )
        {
            if( Engine.panels.gallery.style.display == "block" )
            {
                Engine.panels.gallery.style.display      = "none";
                Engine.panels.gallery.back.style.display = "none";
            }
            else
            {
                Engine.panels.gallery.style.display      = "block";
                Engine.panels.gallery.back.style.display = "block";
            }
            Engine.resize();
        }
    },
    
    click_newest : function( event )
    {
        if( Engine.gallery_loaded && System.Cache["files"].length > 0 )
            Viewer.load( System.Cache["files"][ System.Cache["files"].length-1 ] );
        else
            System.Web.setTimer( "gallery_loader", Engine.click_newest, 3000 );
    },
    
    click_contact : function( event )
    {
        if( Engine.panels.contact.style.display == "block" )
            Engine.panels.contact.style.display = "none";
        else
            Engine.panels.contact.style.display = "block";
    },
    
    load_920 : function( event )
    {
        System.Web.addEvent( Engine.controls.face, "load", Engine.loaded );
        Engine.controls.face.style.display = "none";
        Engine.controls.face.src = "engine/main_face_920.jpg";
        Engine.layout = 920;
    },
    
    load_580 : function( event )
    {
        System.Web.addEvent( Engine.controls.face, "load", Engine.loaded );
        Engine.controls.face.style.display = "none";
        Engine.controls.face.src = "engine/main_face_580.jpg";
        Engine.layout = 580;
    },
    
    load_420 : function( event )
    {
        System.Web.addEvent( Engine.controls.face, "load", Engine.loaded );
        Engine.controls.face.style.display = "none";
        Engine.controls.face.src = "engine/main_face_420.jpg";
        Engine.layout = 420;
    },
    
    move_lt : function( event )
    {
        var pos = Math.min(0, Engine.panels.gallery.move_pos + 264);
            pos = Math.floor(pos / 264) * 264;
        Engine.panels.gallery.move_pos = pos;
        Engine.panels.gallery.contents.style.left = pos + "px";
        
        if( pos == 0 )
            Engine.panels.gallery.move_lt.style.display = "none";
        if( Engine.panels.gallery.style.display == "block" && Engine.panels.gallery.cols * 264 > Engine.panels.gallery.clientWidth )
            Engine.panels.gallery.move_rt.style.display = "block";
    },
    
    move_rt : function( event )
    {
        var off = (264 * Engine.panels.gallery.cols - Engine.panels.gallery.clientWidth) % 264;
        var pos = Engine.panels.gallery.move_pos;

        if( pos % 264 == 0 && off > 0 )
            pos -= off;
        else
            pos -= 264;

        var max = Engine.panels.gallery.clientWidth - 264 * Engine.panels.gallery.cols;

        if( pos < max )
            pos = max;

        Engine.panels.gallery.move_pos = pos;
        Engine.panels.gallery.contents.style.left = pos + "px";
        
        if( pos == max )
            Engine.panels.gallery.move_rt.style.display = "none";
        if( Engine.panels.gallery.style.display == "block" && Engine.panels.gallery.cols * 264 > Engine.panels.gallery.clientWidth )
            Engine.panels.gallery.move_lt.style.display = "block";
    },
    
    resize : function( event )
    {
        if( System.Web.width() >= 580 )
        {
            Engine.controls.main.style.width = System.Web.width() + "px";
            Engine.controls.main.style.left  = "0px";
        }
        else
        {
            Engine.controls.main.style.width = "420px";
            Engine.controls.main.style.left  = Math.max(0, Math.ceil((System.Web.width() - 420) / 2)) + "px";
        }
        Engine.controls.main.style.height = Math.max(450, System.Web.height()) + "px";
        
        var bt = Math.ceil((Engine.controls.main.clientHeight - Engine.controls.back.clientHeight) / 2);
        
        Engine.controls.back.style.width    = Engine.controls.main.clientWidth + "px";
        Engine.controls.back.style.top      = bt + "px";

        Engine.panels.contact.style.left = (Engine.controls.main.clientWidth - 420) + "px";
        Engine.panels.contact.style.top  = bt + "px";
        
        Engine.panels.gallery.style.width = (Engine.controls.main.clientWidth - 156) + "px";
        Engine.panels.gallery.style.top   = bt + "px";
        
        Engine.panels.gallery.back.style.width = Engine.panels.gallery.style.width;
        Engine.panels.gallery.back.style.top   = bt + "px";
        
        Engine.panels.gallery.move_lt.style.top = (bt + 182) + "px";
        Engine.panels.gallery.move_rt.style.top = (bt + 182) + "px";
        
        Engine.panels.gallery.move_lt.style.left = "50px";
        Engine.panels.gallery.move_rt.style.left = (Engine.controls.main.clientWidth - 152) + "px";
        
        if( Engine.panels.gallery.style.display == "block" && Engine.panels.gallery.cols * 264 > Engine.panels.gallery.clientWidth )
        {
            Engine.panels.gallery.move_lt.style.display = "block";
            Engine.panels.gallery.move_rt.style.display = "block";
        }
        else
        {
            Engine.panels.gallery.move_lt.style.display = "none";
            Engine.panels.gallery.move_rt.style.display = "none";
        }
        
        Engine.panels.gallery.move_pos = Engine.panels.gallery.clientWidth - 264 * Engine.panels.gallery.cols;
        Engine.move_rt();

        var gt = bt - 20;
        Engine.controls.gallery.style.top = gt + "px";
        Engine.controls.newest.style.top  = gt + "px";
        Engine.controls.contact.style.top = gt + "px";
        
        var tt = bt + 400;
        Engine.controls.text.style.pixelTop = tt;
        Engine.controls.text.style.top      = tt + "px";
        
        if( System.Web.width() >= 920 )
        {
            if( Engine.layout != 920 )
                Engine.load_920();
            Engine.resize_920(bt);
        }
        else if( System.Web.width() >= 580 )
        {
            if( Engine.layout != 580 )
                Engine.load_580();
            Engine.resize_580(bt);
        }
        else
        {
            if( Engine.layout != 420 )
                Engine.load_420();
            Engine.resize_420(bt);
        }
    },
    
    resize_920 : function( iTop )
    {
        Engine.controls.gallery.style.left = (Engine.controls.main.clientWidth - 333) + "px";
        Engine.controls.newest.style.left  = (Engine.controls.main.clientWidth - 222) + "px";
        Engine.controls.contact.style.left = (Engine.controls.main.clientWidth - 111) + "px";
    
        Engine.controls.face.style.width  = "920px";
        Engine.controls.face.style.height = "400px";
        Engine.controls.face.style.top    = iTop + "px";
    },
    
    resize_580 : function( iTop )
    {
        Engine.controls.gallery.style.left = (Engine.controls.main.clientWidth - 333) + "px";
        Engine.controls.newest.style.left  = (Engine.controls.main.clientWidth - 222) + "px";
        Engine.controls.contact.style.left = (Engine.controls.main.clientWidth - 111) + "px";
    
        Engine.controls.face.style.width  = "580px";
        Engine.controls.face.style.height = "400px";
        Engine.controls.face.style.top    = iTop + "px";
    },
    
    resize_420 : function( iTop )
    {
        Engine.controls.gallery.style.left = "89px";
        Engine.controls.newest.style.left  = "199px";
        Engine.controls.contact.style.left = "309px";
    
        Engine.controls.face.style.width  = "420px";
        Engine.controls.face.style.height = "400px";
        Engine.controls.face.style.top    = iTop + "px";
    },

    load_images : function( xmlResponse )
    {
        if( xmlResponse )
        {
            arrDirs = xmlResponse.responseText.split("\n");
        
            System.Cache["files"] = [];
            Engine.panels.gallery.cols = 0;
            
            var x = 1;
            var y = 1;

            for( var o = arrDirs.length % 3; o > 0 && o < 3; ++o )
                y += 133;
                
            if( y > 1 )
                Engine.panels.gallery.cols = 1;
            
            for( var i = 0; i < arrDirs.length; ++i )
            {
                
            
                if( arrDirs[i] != "" )
                {
                    System.Cache["files"].push( arrDirs[i] );
                    
                    if( y == 1 )
                        Engine.panels.gallery.cols += 1;
                    
                    var img = document.createElement("img");
                    Engine.panels.gallery.contents.appendChild(img);
                    
                    img.className   = "gallery_image";
                    img.src         = arrDirs[i] + "/index.jpg";
                    img.alt         = arrDirs[i];
                    img.style.left  = x + "px";
                    img.style.top   = y + "px";
                    
                    System.Web.addEvent( img, "mousedown", function( event ){
                            var e = System.Web.getEvent(event);
                            if( e.target )
                                Viewer.load( e.target.alt );
                            else if( e.srcElement )
                                Viewer.load( e.srcElement.alt );
                        } );
                    
                    y += 133;
                    if( y >= 400 )
                    {
                        x += 264;
                        y =  1;
                    }
                }
            }
        
            Engine.gallery_loaded = true;
            Engine.resize();
        }
    },
    
    fail_images : function( xmlResponse )
    {
        System.Xml.createXmlRequest( "gallery_loader", Engine.load_images );
        System.Xml.sendXmlRequest( "gallery_loader", "engine.php?x", Engine.fail_images, 10000 );
    },

    main : function()
    {
        // Check for CSS, AJAX capabilities.
        if( !System.Web.supportsStyleSheets(document.getElementById("start_css_test")) || System.Xml.createXmlRequest("test", null) == null )
        {
            document.getElementById("start").innerHTML = "--- digitalseraph.net 4.0 requires javascript, css, and ajax to function properly ---";
            return;
        }
    
        // Damn you, IE6!  Fill the screen while loading.
        var st = document.getElementById("start");
        st.style.width  = System.Web.width() + "px";
        st.style.height = System.Web.height() + "px";

        // Show loading screen.
        var s = document.getElementById("start_contents");
        s.style.top       = (System.Web.height() - s.clientHeight - 1) + "px";
        s.style.width     = (System.Web.width() - 8) + "px";
        s.style.borderTop = "1px solid #000000";
        
        document.getElementById("start_waiting").src = "engine/start_waiting.gif";
        document.getElementById("start_loading").src = "engine/start_loading.png";
        
        // Load viewer component.
        viewer_main();

        // Assign components to the Engine object.
        Engine.controls = new Object();
        Engine.panels   = new Object();
        Engine.layout   = 0;
        Engine.visible  = false;

        Engine.controls.main = document.getElementById("main");
        Engine.controls.back = document.getElementById("main_back");
        Engine.controls.face = document.getElementById("main_face");
        Engine.controls.text = document.getElementById("main_text");

        Engine.controls.gallery = document.getElementById("main_gallery");
        Engine.controls.newest  = document.getElementById("main_newest");
        Engine.controls.contact = document.getElementById("main_contact");

        Engine.panels.gallery = document.getElementById("main_gallery_panel");
        Engine.panels.contact = document.getElementById("main_contact_panel");
        
        Engine.panels.gallery.move_pos = 0;
        Engine.panels.gallery.cols     = 0;
        Engine.panels.gallery.contents = document.getElementById("main_gallery_panel_contents");
        Engine.panels.gallery.back     = document.getElementById("main_gallery_panel_back");
        Engine.panels.gallery.move_lt  = document.getElementById("main_gallery_arrow_lt");
        Engine.panels.gallery.move_rt  = document.getElementById("main_gallery_arrow_rt");

        // Load gallery list.
        Engine.gallery_loaded = false;
        System.Xml.createXmlRequest( "gallery_loader", Engine.load_images );
        System.Xml.sendXmlRequest( "gallery_loader", "engine.php?x", Engine.fail_images, 10000 );

        // Load resolution-independent images.
        Engine.controls.back.style.width    = System.Web.width() + "px";
        Engine.controls.text.style.pixelTop = 0;

        System.Cache["main_load"] = 0;
        var img = null;

        System.Cache["main_images"] = [];        
        System.Cache["main_images"].push("main_gallery");
        System.Cache["main_images"].push("main_newest");
        System.Cache["main_images"].push("main_contact");

        System.Web.addEvent( Engine.controls.text, "load", Engine.loaded );
        Engine.controls.text.src = "engine/main_text.png";

        // Assign events to the Engine components.
        System.Web.addEvent( window, "resize", Engine.resize );
        
        System.Web.addEvent( Engine.controls.gallery, "click", Engine.click_gallery );
        System.Web.addEvent( Engine.controls.newest,  "click", Engine.click_newest );
        System.Web.addEvent( Engine.controls.contact, "click", Engine.click_contact );
        
        System.Web.addEvent( Engine.panels.gallery.move_lt, "mousedown", Engine.move_lt );
        System.Web.addEvent( Engine.panels.gallery.move_rt, "mousedown", Engine.move_rt );
    }
};