/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */


// preloader simple
// no lleva parámetros
// ejemplo de uso
// abrir distractor: $("body").simpleDistractor({});
//cerrar distractor: $("body").simpleDistractor("destroy");
// aspecto: viene en custom_widgets.css
(function($) {
 
 	$.widget( "custom.simpleDistractor", {
		widgetEventPrefix:"jgv",
		options: {
			
		},
		_create: function() {
			console.log("Initializing simple distractor" );
			
			this.container = this.element;
			var content = $("<div id='distractor_popup'><div id='distractor_popup_cont'></div></div>");
                        var distractor = '<div id="circularG"><div id="circularG_1" class="circularG"></div><div id="circularG_2" class="circularG"></div><div id="circularG_3" class="circularG"></div><div id="circularG_4" class="circularG"></div><div id="circularG_5" class="circularG"></div><div id="circularG_6" class="circularG"></div><div id="circularG_7" class="circularG"></div><div id="circularG_8" class="circularG"></div></div>'
                        content.find("#distractor_popup_cont").append(distractor);
                        content.css("opacity", "0")
                                .animate({opacity: "1"}, 
                                                    {duration: 500,
						})
                        this.container.append(content);
		},
                _destroy: function () {
                    this.element.find("#distractor_popup")
                            .animate({opacity: "0"}, 
                                                    {duration: 500,
                                                    complete: function(){
                                                        $(this).remove();
                                                    },
						})
                            ;
                }
		
	});
	
}(jQuery));



// sistema de navegación horizontal
// parámetros: 
// pages: array con objetos con las páginas; los objetos llevan:
//      id: el id (sin el #) de los elementos html de las páginas 
//      level: el nivel en el árbol de navegación (sirve para elegir automáticamente si tiene que navegar a izquierda o derecha
// easing: string con el tipo de easing de jquery ui (no es obligatorio
// ejemplo de uso:
/* $("#main_wrapper").simpleHorizontalNavigator({
        pagesInit:[{id:"select_languaje", level:0},
                {id:"home", level:1}, 
                {id:"new_game", level:2},
        easing:"easeInOutCubic",
    });
*/
// aspecto: viene en custom_widgets.css
(function($) {
 
 	$.widget( "custom.simpleHorizontalNavigator", {
		widgetEventPrefix:"jgv",
		options: {
                        pagesInit:null,
			pages: new Object(),
                        actualLevel:0,
                        actualPage:null,
                        easing: "linear",
		},
		_create: function() {
			console.log("Initializing simpleHorizontalNavigator" );
			this.container = this.element;
                        for(var i=0; i<this.options.pagesInit.length; i++){
                            var _item = this.options.pagesInit[i];
                            var element = $("#"+_item.id);
                            element.addClass("simpleHorizontalNavigatorPage")
                            this.options.pages[_item.id] = {element:element, level:_item.level, ref:_item.id};
                        }
                        this.options.actualPage = this.options.pages[this.options.pagesInit[0].id];
                        this.options.actualLevel = this.options.pages[this.options.pagesInit[0].id].level;
		},
                // navega a la página concreta
                // parámetros:
                // _pageEnd: id de la página a la que se navega (sin el #)
                // preenterFunction ejecuta una posible función previa a la animación (no es obligatorio)
                // completeFunction ejecuta una posible función al terminar la animación (no es obligatorio)
                // ejemplo de uso:
                // $("#main_wrapper").simpleHorizontalNavigator("gotoPage", "home", preenter_page_home, enter_page_home);
                gotoPage: function(_pageEnd, preenterFunction, completeFunction){
                    var _slider = this;
                    if(preenterFunction != null){
                        preenterFunction();
                    }
                    var pageEnd = this.options.pages[_pageEnd];
                    var pageInit = this.options.actualPage;
                    var posInit, posEnd;
                    if(pageEnd){
                        if(pageEnd.level > pageInit.level){
                            pageEnd.element.css("left", "100%");
                            posInit = "-100%";
                            posEnd = "0px";
                        }else{
                            pageEnd.element.css("left", "-100%");
                            posInit = "100%";
                            posEnd = "0px";
                            
                        }
                        pageEnd.element.stop()
                                            .animate(
						{left: posEnd}, 
                                                    {duration: 1000,
                                                    specialEasing: {left: _slider.options.easing},
						}
                        );
                        pageInit.element.stop()
                                            .animate(
						{left: posInit}, 
                                                    {duration: 1000,
                                                    specialEasing: {left: _slider.options.easing},
                                                    complete:function(){
                                                         _slider.options.actualPage = pageEnd;
                                                         _slider.options.actualLevel = pageEnd.level;
							if(completeFunction != null){
                                                           completeFunction();
                                                        }
                                                    },
						}
                        );
                        
                    }else{
                        alert("No se encuentra la página destino");
                        console.log("No se encuentra la página destino");
                    }
                },
                _destroy: function () {
                    this.simpleDistractor.remove();
                }
		
	});
	
}(jQuery));