/*
* Base Overlay Object
*
* This object is not meant to be used on its own.  This object
* should be extended by another object.
* Functionality that is shared by all Modals should be part of this
* object in order to reduce duplicated code.  A specific Modal
* may override functions from this class if necessary.
*/
(function($){

    //var set_time_out;


    PS.Overlay = {

        o:{
            arrowPos: 0,
            tabSection: 0,
            prevTab: 0,
            modalPosY: false,
            stepNum: 0,
            substepNum: 0,
            tabNum: 0
        },
        /*
	    * The configure function needs to be called after the constructor so that the attributes
	    * of the extended classes are available.
	    */
        configure:function(settings){
			
            this.o.modalPosY = settings.modalPosY;
            this.attachEvents();
            
            //deep linking
            var url = window.location.hash,
            step = 1,
            substep = 1;
            

            if(url)
            {
                var tempStep = url.substring(1, url.indexOf('.'));
                
                if( !isNaN(tempStep) && tempStep < 6 && tempStep >= 0)
                {
                    step = tempStep;
                    this.tabNum = 0;
                    
                    var tempSubstep = url.substring(url.indexOf('.')+1);
                    
                    if(!isNaN(tempSubstep) && tempSubstep >= 1)
                    {
                        substep=tempSubstep;
                        var tempTabNum = substep.substring(substep.indexOf('.')+1);
                        
                        if(!isNaN(tempTabNum) && tempTabNum > 1 && tempTabNum <=3){
                            this.tabNum = tempTabNum - 1;
                        }
                    }
                }
                
                this.showStep(settings.stepLinks[step], substep);
            }
        //
        },

        attachEvents:function(){
            $('body').delegate('#modal-bg', 'click', {
                target:'#modal'
            }, $.proxy(this, 'removeOverlay'));
            $('body').delegate('.close-modal', 'click', {
                target:'#modal'
            }, $.proxy(this, 'removeOverlay'));
            $('.open-modal').bind('click', $.proxy(this , 'addOverlay'));

            // Added by Matias
            $('body').delegate('.collapse a' , 'click', $.proxy(this, 'toggleContent'));
        },

        backToTop: function(e){
            e.preventDefault();
            $('body').scrollTo( 0, 20, {
                queue:true
            } );
        },


        showStep: function(step, substep){
            var $modal = $('<div id="modal-bg" /><div id="modal"><div id="modal-content"/></div>');
            $modal.appendTo('body');

            this.loadPage(step, substep);
        },

        showSubstep: function(index){

            var $contents = $('div.tabs-container'),
            $submenuLi = $('#navigation div.sub-menu').find('li');
            
            if($submenuLi.length <= index){
                index = 0;
            }

            $submenuLi.removeClass('selected').find('a').addClass('active');
            $submenuLi.eq(index).find('a').removeClass('active').closest('li').addClass('selected');
            $('#headline-title').text($submenuLi.eq(index).closest('li.active').find('a:first').text() + ': ' + $submenuLi.eq(index).find('a').text());
            $('#how-to-videos').find('a.video').addClass('hidden').eq(index).removeClass('hidden');
            $contents.removeClass('showed');
            $contents.eq(index).addClass('showed');

            this.resetTabs();
            
        },

        resetTabSection: function(){
            this.o.tabSection = 0;
            this.o.prevTab = 0;
        },

        resetTabs: function(){
            $('ul.tabset').find('a').each(function(){
                if(!$(this).hasClass('disable'))
                    $(this).addClass('active');
            });
            $('ul.tabset').each(function(){
                $(this).find('a').removeClass('selected').eq(0).addClass('selected').removeClass('active');
                $(this).closest('div').find('div.tab-content').children('div.column').hide().eq(0).show();
            });
            this.o.prevTab = 0;

        },       
        
        goTo: function(e){
            e.preventDefault();
            this.loadPage($(e.currentTarget).attr('href'), 1);
            
            this.resetTabSection();
        },

        addOverlay: function(e){
            e.preventDefault();
            var $modal = $('<div id="modal-bg" /><div id="modal"><div id="modal-content"/></div>');
            $modal.appendTo('body');
            
            if(this.o.modalPosY){
                $('#modal').css('top', 0);
            }
            
            this.loadPage($(e.currentTarget).attr('href'), 1);
            
        },

        startSetup: function(e){
            e.preventDefault();
            this.loadPage($(e.currentTarget).attr('href'),1);
            $('body').scrollTo( 0, 600, {
                queue:true
            } );
        },
        
        removeOverlay: function(e){
            e.preventDefault();
            $('#modal-bg').remove();
            $('#modal').remove();
        },

        loadPage: function(step, substep){
            $.ajax({
                
                url: step,
                error: function() {
                    //Error message
                    $('#modal-content').html('<h1>A error was been ocurred</h1>');//
                },
                success: $.proxy(function(data){
                    //Content was loaded
                    
                    $('#modal-content').html(data);

                    if(substep == 'last'){
                        this.showSubstep($('#navigation div.sub-menu').find('li').length-1);
                        this.o.substepNum = $('#navigation div.sub-menu').find('li').length-1;
                        this.setIcons(this.o.substepNum);
                    }else{
                        this.showSubstep(substep-1);
                    }
                    if(this.tabNum > 0 && this.tabNum < 3){
                        this.showTabFn( this.tabNum );
                    }
                    this.tabNum = 0;
                    this.o.stepNum = $('#navigation').find('li').find('ul').closest('li').index() + 1;
                    window.location.hash = '';
                    initNav();//Initialize the z-index.js file
                    initBrowserDetect();//Initialize the main.js file
                    if ($.browser.msie && $.browser.version.substr(0,1)<7) {
                        ieHover();//Initialize the ie-hover.js file for IE 6
                    }
                  
                }, this)
            });
        },

        showTab: function(e){
            e.preventDefault();

            if($(e.currentTarget).hasClass('active')){
                this.showTabFn(e.currentTarget.hash.substring(1));
            }
        },

        showTabFn: function (index){

            var $target = $('div.tabs-container.showed').find('.tabset').find('li').eq(index).find('a');
            var $contents = $target.closest('div').find('div.tab-content');

            
            $contents.children('div.column').hide();
            $contents.children('div.column').eq(index).show();
            $target.closest('ul').find('li').eq(this.o.prevTab).find('a').removeClass('selected').addClass('active');
            $target.addClass('selected').removeClass('active');
            //this.tabNum = index
            this.o.prevTab = index;
                
        },

        // Added by Matias
        toggleContent: function(e){
            e.preventDefault();
            var $target = $(e.currentTarget);
            var $contents = $target.closest('div.content-block').find('div.info-box, #righ-col-colapsible');
            if($contents.css("display")=="none"){
                $target.removeClass("closed").text('Collapse Window');
            } else {
                $target.addClass("closed").text('Expand Window');
            }
            $contents.slideToggle(100);
        }
    };
})(jQuery);