/*******************************************************
    *
    *  JavaScript controller for Robert Karpati portfolio
    *  
    *  Created by Tibor Szász | http://tibor.szasz.hu
    *       
    *  Copyright, All rights reserved, 2009               
    *
    ******************************************************/
     
    var RobFolio = new Class(
    {
        initialize: function()
        {
            // Class variables
            this.stageWidth = 1420; //px
            this.dataModel = {};
            this.navigatedFrom = ''; // To know where to go back, stores stageID
            var pass = this;

			if( window.getWidth() > 1440 )
			{
				$('black_line').setStyles({ 'width': '1440px', 'margin': 'auto' });
			} else {
				$('black_line').setStyles({ 'width': 'none', 'margin': 'auto' });
			}
  
            // Render views
            site_view.renderThumbs( 'portfolio', works );
            //site_view.renderThumbs( 'downloads', downloads );
            
            // Init Scrollers
            this.initScrollers();
                         
            // Init navigation 
            this.initNavigation();            
            
            // Init Views: portfolio, downloads, work browser, message form
            this.portfolio   = new ReferenceBrowser('portfolio');
            //this.downloads   = new ReferenceBrowser('downloads');
            this.workBrowser = new WorkBrowser('work');
            
            // Some user friendly utils
            this.scanErrors();
            this.resizeHeader();
            
            $('contact').getElement('.message_sent').fade();
            window.addEvent('resize', function(){ pass.resizeHeader(); });
        },

        /**
         *  Stages slider
         */                         
        initScrollers: function()
        {
            this.canvasScroller = new Fx.Scroll( $('canvas'), { 
                transition: Fx.Transitions.Quart.easeOut,
                duration: 1500 
            });
            var adjust = this.getAdjust();
            this.canvasScroller.set( adjust, 0 ); // Centerize first stage
        },
        
        initNavigation: function()
        {
            var pass = this;
            
            $$('#navigation a').each( function( lnk, i )
            {
                lnk.addEvent( 'click', function()
                {
                    $$('#navigation a').each( function( lnk, i ){
                        lnk.removeClass('active');
                    });
                    lnk.addClass('active');
                    
                    pass.canvasScroller.cancel(); // Don't wait for animation to be completed
                    var adjust = pass.getAdjust();
                    pass.canvasScroller.start( this.rel * pass.stageWidth + adjust, 0 );
                });
            });
            
            // Message form button event
            $('send_form').addEvent( 'click', function()
            {
                pass.sendMessage();
                this.style.background = "black url( images/loading.gif ) no-repeat center center";
                this.value = '';
            });
            
            $('to_front').addEvent( 'click', function()
            {
                pass.showStage(0);
            });
        },

        showStage: function( index )
        {
            var adjust = this.getAdjust();
            this.canvasScroller.start( index * this.stageWidth + adjust, 0 );
        },

        /**
         *  Calculate centering adjustment for stages  
         */                 
        getAdjust: function()
        {
            var adjust = ( this.stageWidth - window.getWidth() ) / 2;
            return adjust;
        },

        /**
         * Checks for errors in data objects and displays them
         */                 
        scanErrors: function()
        {
            if( works.error !== 'none' )
            {
                $('main_title').innerHTML = works.error;
                $('main_title').style.color = '#f00';
            }
             
            if( downloads.error !== 'none' )
            {
                $('main_title').innerHTML = downloads.error;
                $('main_title').style.color = '#f00';
            } 
        },
        
        sendMessage: function()
        {
            var messOBJ = {};
            
            messOBJ.from    = $('name').value; 
            messOBJ.email    = $('email').value;             
            messOBJ.message = $('message').value; 

            // AJAX CALL
            var jsonRequest = new Request.JSON({url: "message.php", onSuccess: function(rsp)
            {
                if( rsp.success == 'ok' )
                {
                    $('contact').getElement('.image_block').fade();
                    $('contact').getElement('.message_sent').fade();
                }
                else
                {
                    $('main_title').innerHTML = 'Hiba a levél küldésekor / Error sending mail';
                    $('main_title').style.color = '#f00';
                }
            }}).post( messOBJ );
        },
        
        resizeHeader: function()
        {
            var intendHeight = ( window.getHeight() - 500 ) / 2;
            
            // Set minimal hight to 66px
            $('header').style.height = ( intendHeight < 66 ) ? 66 + 'px' : intendHeight + 'px';
            
            // Adjust logo position
            var adjust = ( window.getWidth() - 982 ) / 2 + 60;
            $('header').style.background = "transparent url( images/logo.png ) no-repeat "+ adjust +"px center";
        }

    });



    /*******************************************************
    *
    *  JavaScript controller for Reference browser
    *
    ******************************************************/

    var ReferenceBrowser = new Class(
    {
        initialize: function( stageID )
        {
            // Class variables
            this.stageObj = $( stageID );
            this.stageID = stageID; 
            this.pageWidth = 512;
            this.curPage = 0;
            this.pageNum = this.stageObj.getElements( '.ref_page' ).length - 1;

            // Init Scrollers
            this.initScrollers();

            // Init Navigation
            this.initNavigation();
            
            // Init thumb events
            this.initThumbs();
        },
      
        initScrollers: function()
        {
            this.refScroller = new Fx.Scroll( this.stageObj.getElement('.image_block'), { 
                transition: Fx.Transitions.Quart.easeOut,
                duration: 2000 
            });
        },
        
        initNavigation: function()
        {
            var pass = this;
            var navLinks = this.stageObj.getElements('.control_block a');
            
            navLinks[1].addEvent( 'click', function()
            {
                pass.refScroller.cancel(); // Don't wait for animation to be completed
                pass.curPage = ( pass.curPage == pass.pageNum ) ? 0 : pass.curPage+1;
                pass.refScroller.start( pass.pageWidth*pass.curPage, 0 );
            });
            
            navLinks[0].addEvent( 'click', function()
            {
                pass.refScroller.cancel(); // Don't wait for animation to be completed
                pass.curPage = ( pass.curPage == 0 ) ? pass.pageNum : pass.curPage-1;
                pass.refScroller.start( pass.pageWidth*pass.curPage, 0 );
            });
        },
        
        initThumbs: function()
        {
            var pass = this;
            this.stageObj.getElements('.ref_wrapper a').addEvent( 'click', function()
            {
                site_controller.canvasScroller.cancel();
                site_controller.navigatedFrom = pass.stageID;
                site_controller.showStage( 1 );
                site_view.renderWorks( this.rel );
            });            
        }
    });



    /*******************************************************
    *
    *  JavaScript controller for Work / downloads
    *
    ******************************************************/

    var WorkBrowser = new Class(
    {
        initialize: function( stageID )
        {
            // Class variables
            this.stageObj = $( stageID ); 
            this.pageWidth = 512;
            this.curImage = 0;
            this.totalImages = 6; 

            // Init Scrollers
            this.initScrollers();

            // Init Navigation
            this.initNavigation();
            this.buildLinks();
        },
        
        initScrollers: function()
        {
            this.refScroller = new Fx.Scroll( this.stageObj.getElement('.image_block'), { 
                transition: Fx.Transitions.Quart.easeOut,
                duration: 2000 
            });
        },

        buildLinks: function()
        {
            // Clear existing links
            var pass = this;
            var links = this.stageObj.getElements('.page_numbers a');
            links.each( function( a ){ a.destroy() } );

            for( var i=0;i<this.totalImages; i++ )
            {
                var pgNum = i+1;
                var navLink = new Element( 'a' );
                navLink.href = '#';
                navLink.innerHTML = ( i < 10 ) ? '0'+pgNum : pgNum;
                navLink.rel = i;
                navLink.className = ( i == 0 ) ? 'active' : '';
                navLink.addEvent( 'click', function()
                {
                    pass.curImage = this.rel;
                    pass.stageObj.getElements('.page_numbers a').each( function( a ){ a.removeClass('active') } );
                    this.addClass('active');
                    pass.refScroller.cancel(); // Don't wait for animation to be completed
                    pass.refScroller.start( pass.pageWidth * this.rel, 0 );
                });
                navLink.inject( pass.stageObj.getElement('.page_numbers') );
            }
        },

        initNavigation: function()
        {
            var pass = this;
            var navLinks = this.stageObj.getElements('.prev_next a');

            navLinks[1].addEvent( 'click', function()
            {
                pass.refScroller.cancel(); // Don't wait for animation to be completed
                pass.curImage = ( pass.curImage == pass.totalImages - 1 ) ? 0 : pass.curImage+1;
                pass.refScroller.start( pass.pageWidth*pass.curImage, 0 );
                
                // Activate numbers
                var links = pass.stageObj.getElements('.page_numbers a');
                links.each( function( a ){ a.removeClass('active') } );
                links[ pass.curImage ].addClass('active');
            });
            
            navLinks[0].addEvent( 'click', function()
            {
                pass.refScroller.cancel(); // Don't wait for animation to be completed
                pass.curImage = ( pass.curImage == 0 ) ? pass.totalImages-1 : pass.curImage-1;
                pass.refScroller.start( pass.pageWidth*pass.curImage, 0 );

                // Activate numbers
                var links = pass.stageObj.getElements('.page_numbers a');
                links.each( function( a ){ a.removeClass('active') } );
                links[ pass.curImage ].addClass('active');
            });
            
            this.stageObj.getElement('a.back').addEvent( 'click', function()
            {
                var navigate_to = ( site_controller.navigatedFrom == 'portfolio' ) ? 0 : 2;
                site_controller.showStage( navigate_to );
            });                         
        }
    });

    var View = new Class(
    {
        initialize: function()
        {
            if( $$('.ref_wrapper a').length > 0 )
            {
                $$('.ref_wrapper a').each( function(a){ a.target = '_blank' } );
            }
        },

        // This is good for two stages: portfolio and downloads
        renderThumbs: function( stage, data )
        {
            var c = 0;
            var refPage = new Element('div');
                refPage.className = 'ref_page';

            data.work.each( function( gall, i )
            {
                if( c < 12 ) // Apped thumb OR inject page
                {
                    refPage.innerHTML += '<a href="#" class="thumb" rel="'+gall.directory+'"><span style="background:url(files/'+stage+'/'+gall.directory+'/thumb.jpg?'+i+')"></span></a>';
                }
                else
                {
                    refPage.inject( $(stage).getElement('.ref_wrapper') );
                    // New page
                    refPage = new Element('div');
                    refPage.className = 'ref_page';
                    refPage.innerHTML += '<a href="#" class="thumb" rel="'+gall.directory+'"><span style="background:url(files/'+stage+'/'+gall.directory+'/thumb.jpg?'+i+')"></span></a>';
                    c = 0; // Counter reset
                }
                c++;
            });

            // This happens, when there are only one page exists
            if( data.work.length < 12  )
            {
                $(stage).getElement('.control_block').style.display = 'none';                
                refPage.inject( $(stage).getElement('.ref_wrapper') );
            }

            // This renderes the last page, if the page is not full
            if( data.work.length%12 !== 0 )
            {
                refPage.inject( $(stage).getElement('.ref_wrapper') );
            }
        },

        // This is the template for a work gallery
        // Also updates the gallery info text
        // Call buildLinks function in the Works class 
        renderWorks: function( directory )
        {
            var worksPanel = site_controller.workBrowser.stageObj.getElement('.ref_wrapper');
            var descItems = site_controller.workBrowser.stageObj.getElements('.desc_block li');
            var model = ( site_controller.navigatedFrom == 'portfolio' ) ? works.work : downloads.work;
            var imageARR = [];

            // Set overflow back
            site_controller.workBrowser.refScroller.set( 0, 0 );
            worksPanel.innerHTML = $('szotar_loading').innerHTML;
                        
            // Find the gallery data
            model.each( function( gall )
            {
                if( gall.directory == directory )
                {
                    // Set TEXT-s
                    descItems[0].innerHTML = gall.client;
                    descItems[1].innerHTML = gall.desc;
                    descItems[2].innerHTML = gall.year;

                    if( gall.images == 1 )
                    {
                        site_controller.workBrowser.stageObj.getElement('.prev_next').style.display = 'none';
                        site_controller.workBrowser.stageObj.getElement('.page_numbers').style.display = 'none';
                    } 
                    else
                    {
                        site_controller.workBrowser.stageObj.getElement('.prev_next').style.display = 'block';
                        site_controller.workBrowser.stageObj.getElement('.page_numbers').style.display = 'block';
                    } 
                    
                    // Build image array for downloading
                    for( i=0; i<gall.images; i++ )
                    {
                        imageARR.push( 'files/' + site_controller.navigatedFrom + '/' + directory + '/' + ( parseInt(i)+1 ) + '.jpg' );
                    }

                    site_controller.workBrowser.curImage = 0;
                    site_controller.workBrowser.totalImages = gall.images;
                    
                    var imgOBJs = new Asset.images( imageARR,
                    {
                        onComplete: function() // This is where the method ends
                        {
                            // Erase previous content
                            worksPanel.innerHTML = '';
                            
                            // Wrap images into a "border" div, then inject them
                            imgOBJs.each( function( img )
                            {
                                var wi = new Element( 'div', { 'class': 'work_item' } );
                                img.inject( wi );
                                wi.inject( worksPanel );
                            });
                            
                            // Rebuild links
                            site_controller.workBrowser.buildLinks();
                        },
                        onProgress: function()
                        {
                            worksPanel.innerHTML += '.';
                        }
                    });
                }
            });
        }
    });

    var site_controller = {};
    var site_view = {};
    
    window.addEvent( 'load', function()
    {
        $('overlay').fade();
        site_view = new View();
        site_controller = new RobFolio();
    });