/********************************************/
/******* jQuery Panoramic Image Viwer *******/
/********************************************/

// Compatible con jQuery 1.4.4 a (Actual 1.7.1)
// Propiedad de Spanisland


/*Arriba*/
$(document).ready(function(){
        $('img#img_panoramic').imagesLoaded( function( $images ) {
             activa_navegador();
             $("body").animate({"opacity": "1"}, 600);
             
        });
        function activa_navegador(){
            if($('img#img_panoramic').width() > 964){
                    startNav();
            }else{
                    $(".photonav").removeClass();
            }
        }
        
    $("div.featured-panoramic-button a, .featured-category a, .breadcrumb a").click(function(){
        $("body").animate({"opacity": "0"}, 600);
    });
    
    function LimiteAbajo() {
        var ImgHeight = $("#panoramica img").css('height').replace('px','');
        var MarcoHeight = $(".photonav .foto").css('height').replace('px','');
        var resultado = ImgHeight - MarcoHeight;
        //console.log(resultado);
        return resultado;
    }
    function PosicionActualVertical(){
        var $navegador = $(".photonav .foto .opt2");
        var $posicion = $navegador.css('marginTop').replace('px','')
        return $posicion;
    }
    /*Calculo la distacia hasta el final de los dos botones*/
    function DiferenciaMargenAbajo(a, limite){
        var margen = limite - a;
        return margen;
    }
    function DiferenciaMargenArriba(a, limite){
        var margen = limite +(-a);
        return margen;
    }
    function calcular_margen_arriba(){
        $(document).ready(function() {
            var alto = $("#panoramica img").height();
            var posicion_boton_abajo = alto - 100;
            var p = posicion_boton_abajo+"px";
            $(".photonav .foto .boton_movimiento_abajo").css({marginTop: p});
        });
    }
    
    
    
    /*Abajo*/
    /*Calculo la posicion actual de la imagen*/
    function LimiteDerecho() {
        var ImgWidth = $("#panoramica img").css('width').replace('px','');
        var MarcoWidth = $(".photonav .foto").css('width').replace('px','');
        var resultado = ImgWidth - MarcoWidth;
        return resultado;
    }
    function PosicionActual(){
        var $navegador = $(".photonav .foto .opt2");
        var $posicion = $navegador.css('marginLeft').replace('px','')
        return $posicion;
    }
    /*Calculo la distacia hasta el final de los dos botones*/
    function DiferenciaMargenDerecho(a, limite){
        var margen = limite - a;
        return margen;
    }
    function DiferenciaMargenIzquierdo(a, limite){
        var margen = limite +(-a);
        return margen;
    }
    /*function LimiteAlto() {
        var ImgHeight = $("#panoramica img").css('height').replace('px','');
        var MarcoHeight = $(".photonav .foto").css('height').replace('px','');
        var resultado = ImgHeight - MarcoHeight;
        console.log(resultado);
        return resultado;
    }*/
    /*funcion que inicia el visor*/
    
    /************ Posiciones de la imagen centrada *************/
    
        function HoraporImagen(){
                                    
                                    
                var manana = "";
                var tarde = "_tarde";
                var noche = "_noche";
                var amanecer = "_amanecer";   
                    
                    
                var Fecha = new Date();
                /* Capturamos la Hora */
                var hora = Fecha.getHours();
                var Imagen = $("#panoramica img");
                var src1 = Imagen.attr('src').replace('.jpg', '');
                var src = src1.replace('http://www.spanisland.com/image/panoramic/category/', '');

                if(hora >= 10 && hora < 17){
                        var Url = src+manana+".jpg"
                        var image = src1+manana+".jpg"
                                $.ajax({
                                    type: 'POST', url: "/catalog/model/catalog/imagenporhora.php",
                                    data: "imagen="+Url,
                                    success: function(msg) {
                                        console.log(msg);
                                        if (msg == 'true'){
                                                
                                                Imagen.attr('src', image);
                                        }
                                    }, error: function() {
                                        
                                    }
                                            
                                });
                        
                }
                if(hora >= 17 && hora < 20){
                        var Url = src+tarde+".jpg"
                        var image = src1+tarde+".jpg"
                                $.ajax({
                                    type: 'POST', url: "/catalog/model/catalog/imagenporhora.php",
                                    data: "imagen="+Url,
                                    success: function(msg) {
                                        console.log(msg);
                                        if (msg == 'true'){
                                                
                                                Imagen.attr('src', image);
                                        }
                                    }, error: function() {
                                        
                                    }
                                            
                                });
                        
                }
                if(hora >= 7 && hora < 10){
                        var Url = src+amanecer+".jpg"
                        var image = src1+amanecer+".jpg"
                                $.ajax({
                                    type: 'POST', url: "/catalog/model/catalog/imagenporhora.php",
                                    data: "imagen="+Url,
                                    success: function(msg) {
                                        if (msg == 'true'){
                                                
                                                Imagen.attr('src', image);
                                        }
                                    }, error: function() {
                                        
                                    }
                                            
                                });
                        
                }
                if(hora >= 20 && hora < 24){
                        var Url = src+noche+".jpg"
                        var image = src1+noche+".jpg"
                                $.ajax({
                                    type: 'POST', url: "/catalog/model/catalog/imagenporhora.php",
                                    data: "imagen="+Url,
                                    success: function(msg) {
                                        if (msg == 'true'){
                                                Imagen.attr('src', image);
                                        }
                                    }, error: function() {
                                        
                                    }
                                            
                                });
                        
                }
        }
                
        //HoraporImagen();
            
        function startNav(){
                var $navegador = $(".photonav .foto .opt2");
                var ancho_imagen = $('img#img_panoramic').width();
                /*Posicion default centrada*/
                
                
                /*Variables de los botones*/
                
                /*vertical*/
                var B_arriba = $(".photonav .foto .boton_movimiento_arriba");
                var B_abajo = $(".photonav .foto .boton_movimiento_abajo");
                
                
                /*Horizontal*/
                var B_izquierdo1 = $(".photonav .foto .boton_movimiento_izquierdo1");
                var B_derecho1 = $(".photonav .foto .boton_movimiento_derecho1");
                var B_izquierdo2 = $(".photonav .foto .boton_movimiento_izquierdo2");
                var B_derecho2 = $(".photonav .foto .boton_movimiento_derecho2");
                var B_izquierdo3 = $(".photonav .foto .boton_movimiento_izquierdo3");
                var B_derecho3 = $(".photonav .foto .boton_movimiento_derecho3");
                var B_izquierdo4 = $(".photonav .foto .boton_movimiento_izquierdo4");
                var B_derecho4 = $(".photonav .foto .boton_movimiento_derecho4");
                
                /* Valores de velocidad en ms de fuera a dentro */
                
                /****************/
                
                /***** 1 seg = 1000 ms *****/
                
                var V1 = 1000; //<-- 1000ms
                var V2 = 2500; //<-- 2500ms
                var V3 = 5000; //<-- 5000ms
                var V4 = 10000; //<-- 10000ms
                
                var Vertical = 500; //<-- 500ms
                
                /***************************/
                
                
                /*Al hacer hover se activa la animacion*/
            
                /*de fuera hacia adentro*/
                
                /* Abajo y arriba */
                
                
                B_abajo.hover(function() {
                        
                        var $margen = DiferenciaMargenAbajo(PosicionActualVertical(), "-"+LimiteAbajo());
                        $navegador.animate({marginTop: "+="+$margen+"px"}, Vertical);
                },function() {
                    $navegador.stop();
                });
                
                
                B_arriba.hover(function() {
                        $navegador.stop();
                        var $margen = DiferenciaMargenArriba(PosicionActualVertical(), 0);
                        $navegador.animate({marginTop: "+="+$margen+"px"}, Vertical);
                },function() {
                        $navegador.stop();
            
                });
                
                
                /**** 1 ****/
                B_derecho1.hover(function() {
                        var $margen = DiferenciaMargenDerecho(PosicionActual(), "-"+LimiteDerecho());
                        $navegador.animate({marginLeft: "+="+$margen+"px"}, V1);
                },function() {
                    $navegador.stop();
                });
                
                
                
                B_izquierdo1.hover(function() {
                        var $margen = DiferenciaMargenIzquierdo(PosicionActual(), 0);
                        $navegador.animate({marginLeft: "+="+$margen+"px"}, V1);
                },function() {
                        $navegador.stop();
            
                });
                
                B_derecho1.click(function() {
                        var $margen = "-"+LimiteDerecho();
                        $navegador.animate({marginLeft: $margen+"px"}, V1);
                });
                
                
                
                B_izquierdo1.click(function() {
                        
                        var $margen = 0;
                        $navegador.animate({marginLeft: $margen+"px"}, V1);

                });
                
                /**** 2 ****/
                
                B_derecho2.hover(function() {
                        $navegador.stop();
                        var $margen = DiferenciaMargenDerecho(PosicionActual(), "-"+LimiteDerecho());
                        $navegador.animate({marginLeft: "+="+$margen+"px"}, V2);
                },function() {
                    $navegador.stop();
                });
                
                
                B_izquierdo2.hover(function() {
                        $navegador.stop();
                        var $margen = DiferenciaMargenIzquierdo(PosicionActual(), 0);
                        $navegador.animate({marginLeft: "+="+$margen+"px"}, V2);
                },function() {
                        $navegador.stop();
            
                });
                
                /**** 3 ****/
                
                B_derecho3.hover(function() {
                        $navegador.stop();
                        var $margen = DiferenciaMargenDerecho(PosicionActual(), "-"+LimiteDerecho());
                        $navegador.animate({marginLeft: "+="+$margen+"px"}, V3);
                },function() {
                    $navegador.stop();
                });
                
                
                B_izquierdo3.hover(function() {
                        $navegador.stop();
                        var $margen = DiferenciaMargenIzquierdo(PosicionActual(), 0);
                        $navegador.animate({marginLeft: "+="+$margen+"px"}, V3);
                },function() {
                        $navegador.stop();
            
                });
                
                /**** 4 ****/
                
                B_derecho4.hover(function() {
                        $navegador.stop();
                        var $margen = DiferenciaMargenDerecho(PosicionActual(), "-"+LimiteDerecho());
                        $navegador.animate({marginLeft: "+="+$margen+"px"}, V4);
                },function() {
                        $navegador.stop();
                });
                B_izquierdo4.hover(function() {
                        $navegador.stop();
                        var $margen = DiferenciaMargenIzquierdo(PosicionActual(), 0);
                        $navegador.animate({marginLeft: "+="+$margen+"px"}, V4);
                },function() {
                        $navegador.stop();
            
                });
                
                $("div#featured-categories-wrapper div.featured-category").css("z-index", "320");
                //$("div#featured-categories-wrapper div.featured-category").css("width", "auto");
                $("div#panoramica-wrapper").css("z-index", "auto");
                $("div#featured-buttons-wrapper div.featured-panoramic-button").css("z-index", "320");
                $("div#panoramica-wrapper").css({"z-index": "auto", "width": ancho_imagen+"px"});
                /************************/
                
                    
                    var PosicionMediaVertical = LimiteAbajo() / -2;
                    var PosicionMediaHorizontal = LimiteDerecho() / -2;
                    
                    B_derecho1.css({"opacity": "0.8"});
                    B_izquierdo1.css({"opacity": "0.8"});
                    //Posicion vertical
                    
                    if(PosicionMediaHorizontal != '0'){
                        $navegador.css({"margin-left": PosicionMediaHorizontal});
                        $navegador.css({"margin-top": PosicionMediaVertical});
                    }else{
                        $navegador.css({"margin-left": PosicionMediaHorizontal});
                        $navegador.css({"margin-top": PosicionMediaVertical});    
                    }
        }
});