$(function() {

    var $ = jQuery.noConflict();
    var additionalImagesLittle = $('#galeria ul li');
    var totalImages = additionalImagesLittle.length; //total de imagens do produto                
    var divAdditionalImages = $('#divAdditionalImages div'); //div que contém as imagens a serem exibidas
    var scrollTop = 0;
    
    //evento responsável pela exibição dos videos do produto
    $('#imgVideo').click(function() {
        $('#divVideo').removeAttr("style");
        if ($("#divVideo").hasClass("unClicked")) {
            $('a.youtubin').youtubin({
                swfWidth: 410,
                swfHeight: 425
            });

            $('#divVideo').removeClass('unClicked');
            $('#divVideo').addClass('clicked'); //exibi o video  

            $('#divMagnify').hide(); //oculta a div da imagem principal
        }
        else
        {
            $('#divVideo').removeClass('clicked');
            $('#divVideo').addClass('unClicked'); //exibi o video  

            $('#divMagnify').show(); //exibe a div da imagem principal
        }
        
        
        //oculta todas as divs de imagens
        for (i = 0; i < totalImages; i++) {
            if ($(divAdditionalImages[i]).hasClass('clicked')) {
                $(divAdditionalImages[i]).removeClass('clicked');
                $(divAdditionalImages[i]).addClass('unClicked');
            }
        }
        $("#divZoomProd2").removeClass('clicked');
        $("#divZoomProd2").addClass('unClicked');
    });

    additionalImagesLittle.mouseenter(function() {
            if ($("#divVideo").hasClass("unClicked")) {
                var currentItemClass = $(this).attr('class');
                var index = currentItemClass.indexOf('-');
                var selectedIndex = currentItemClass.substring((index + 1));
                var class1 = "imagemAdicionalPequena-" + selectedIndex;
                var class2 = "imagemAdicional-" + selectedIndex;

                for (i = 0; i < totalImages; i++) {
                    if ($(additionalImagesLittle[i]).hasClass(class1)) {
                        if (i == 0) {
                            $('#divMagnify').show();
                            $(divAdditionalImages[i]).removeClass('clicked');
                            $(divAdditionalImages[i]).addClass('unClicked');
                            $("#divZoomProd2").removeClass('clicked');
                            $("#divZoomProd2").addClass('unClicked');
                        }
                        else {
                            $(divAdditionalImages[i]).removeClass('unClicked');
                            $(divAdditionalImages[i]).addClass('clicked');
                            $("#divZoomProd2").removeClass('unClicked');
                            $("#divZoomProd2").addClass('clicked');
                            $('#divMagnify').hide();
                        }
                    }
                    else {
                        $(divAdditionalImages[i]).removeClass('clicked');
                        $(divAdditionalImages[i]).addClass('unClicked');
                    }
                }
            }
        });

    additionalImagesLittle.click(function() {
        if ($("#divVideo").hasClass("clicked")) {
            var totalImages = additionalImagesLittle.length;
            var divAdditionalImages = $('#divAdditionalImages div');

            var currentItemClass = $(this).attr('class');
            var index = currentItemClass.indexOf('-');
            var selectedIndex = currentItemClass.substring((index + 1));
            var class1 = "imagemAdicionalPequena-" + selectedIndex;
            var class2 = "imagemAdicional-" + selectedIndex;

            for (i = 0; i < totalImages; i++) {
                if ($(additionalImagesLittle[i]).hasClass(class1)) {
                    if (i == 0) {
                        $('#divMagnify').show();
                        $(divAdditionalImages[i]).addClass('unClicked');
                        $("#divZoomProd2").removeClass('clicked');
                        $("#divZoomProd2").addClass('unClicked');
                    }
                    else {
                        $(divAdditionalImages[i]).removeClass('unClicked');
                        $(divAdditionalImages[i]).addClass('clicked');
                        $("#divZoomProd2").removeClass('unClicked');
                        $("#divZoomProd2").addClass('clicked');
                        $('#divMagnify').hide();
                    }
                }
                else {
                    $(divAdditionalImages[i]).removeClass('clicked');
                    $(divAdditionalImages[i]).addClass('unClicked');
                }
            }
            $("#divVideo").removeClass("clicked");
            $("#divVideo").addClass("unClicked");
        }
    });
    $("#divTransProd").height(function() {
        var intHeght = $(document).height();
        $(this).height(intHeght);
    })
    .click(function() {
        $('#divTransProd').removeClass('visiblediv');
        $('#divTransProd').addClass('invisiblediv');
        $('#divZoomProd').removeClass('visiblediv');
        $('#divZoomProd').addClass('invisiblediv');
        $(window).scrollTop(scrollTop);  
    });
    $("#div_PopUp").click(function() {
        $('#div_PopUp').removeClass('visiblediv');
        $('#div_PopUp').addClass('invisiblediv');
        $('#div_PopUp2').removeClass('visiblediv');
        $('#div_PopUp2').addClass('invisiblediv');
        
        $('#spadsImgRecommendedProd').attr("src", "");
        $('#spaidProduct').html("");
        $('#spaDsName').html("");
        $('#spadsDescription').html("");            
        $('#spavlPrice').html("");
        $('#spaLink').attr("href","");  
    });
    $('img.btZoomProduct').click(function() {

        $('#divTransProd').removeClass('invisiblediv');
        $('#divTransProd').addClass('visiblediv');
        $('#divZoomProd').removeClass('invisiblediv');
        $('#divZoomProd').addClass('visiblediv');
        scrollTop = $(window).scrollTop();
        $(window).scrollTop(0);
        $('#divZoomProd').css('left', function() {
            var a = eval(document.documentElement.clientWidth) / 2;

            if (a > 375)
                return a - 375;
            else
                return 0;
        });
    });
    $.fn.ShowRecommendedProdDetail = function(){

            $('#div_PopUp').removeClass('invisiblediv');
            $('#div_PopUp').addClass('visiblediv');
            $('#div_PopUp2').removeClass('invisiblediv');
            $('#div_PopUp2').addClass('visiblediv');
            
            $('#div_PopUp2').css('left', function(){
                var a = eval(document.documentElement.clientWidth) / 2;
                return a - 308;
            });
            
            $('#div_PopUp2').css('top', function() {
                var b = (eval(getScrollHeight()) + eval(document.documentElement.clientHeight) / 2);                    
                return b - 195;
            });
    };
    $('img.SetValuesPopUp').click(function(){
    
            var imgId = $(this).attr("id");
            var indexSplit = imgId.indexOf("-");
            var itemIndex = imgId.substring(indexSplit+1,imgId.length);//indice da imagem que foi clicada
            var itemId = "hdnSetValuesPopUp-" + itemIndex;//id do hidden que contém as informações do produto clicado
            var itemValue = $("#"+itemId).html();//value do hidden
            var x = itemValue.indexOf("|");//o marcador "|" é utilizado na separação dos campos, atualmente são 5 campos
            //no array abaixo criado será feito o split dos campos de forma que eles serão separados cada valor em um indice
            //caso seja necessário adicionar ou remover algum valor basta ajustar o vetor
            
            var values = new Array(5);            
            var i = 0;
            
            while(x > 0)
            {                                       
                values[i] = itemValue.substring(0,x);//aqui ocorre a separação dos campos                
                itemValue = itemValue.substring(x+1,itemValue.length);//aqui é atualizada a string principal, retirando as informações dos campos que já foram guardado no vetor
                x = itemValue.indexOf("|"); 
                i = i +1;
            }     
            //Abaixo ocorre a alimentação dos campos, note que o segundo valor do vetor é o idproduct, e o mesmo é utilizado duas vezes
            $('#spadsImgRecommendedProd').attr("src", 'images/Product/' + values[0]);
            $('#spaidProduct').html(values[1]);
            $('#spaDsName').html(values[2]);
            $('#spadsDescription').html(values[3]);            
            $('#spavlPrice').html(values[4]);
            $('#spaLink').attr("href",'product.aspx?idproduct=' + values[1]);  
            
            $.fn.ShowRecommendedProdDetail();
    }        
    );
    $('label.SetValuesPopUp').click(function(){
    
            var itemIndex = $("label.SetValuesPopUp").index($(this));
            var itemId = "hdnSetValuesPopUp-" + itemIndex;//id do hidden que contém as informações do produto clicado
            var itemValue = $("#"+itemId).html();//value do hidden
            var x = itemValue.indexOf("|");//o marcador "|" é utilizado na separação dos campos, atualmente são 5 campos
            //no array abaixo criado será feito o split dos campos de forma que eles serão separados cada valor em um indice
            //caso seja necessário adicionar ou remover algum valor basta ajustar o vetor
            
            var values = new Array(5);            
            var i = 0;
            
            while(x > 0)
            {                                       
                values[i] = itemValue.substring(0,x);//aqui ocorre a separação dos campos                
                itemValue = itemValue.substring(x+1,itemValue.length);//aqui é atualizada a string principal, retirando as informações dos campos que já foram guardado no vetor
                x = itemValue.indexOf("|"); 
                i = i +1;
            }
            //Abaixo ocorre a alimentação dos campos, note que o segundo valor do vetor é o idproduct, e o mesmo é utilizado duas vezes
            $('#spadsImgRecommendedProd').attr("src", 'images/Product/' + values[0]);
            $('#spaidProduct').html(values[1]);
            $('#spaDsName').html(values[2]);
            $('#spadsDescription').html(values[3]);            
            $('#spavlPrice').html(values[4]);
            $('#spaLink').attr("href",'product.aspx?idproduct=' + values[1]);      
            
            $.fn.ShowRecommendedProdDetail();       
    }        
    );
   $('img.SetValuesPopUpMain').click(function(){
   
        var imgId = $(this).attr("id");
        var indexSplit = imgId.indexOf("-");
        var itemIndex = imgId.substring(indexSplit+1,imgId.length);//indice da imagem que foi clicada
        var itemId = "hdnSetValuesPopUpMain-" + itemIndex;//id do hidden que contém as informações do produto clicado
        var itemValue = $("#"+itemId).html();//value do hidden
        var x = itemValue.indexOf("|");//o marcador "|" é utilizado na separação dos campos, atualmente são 5 campos
        //no array abaixo criado será feito o split dos campos de forma que eles serão separados cadas valor em um indice
        //caso seja necessário adicionar ou remover algum valor basta ajustar o vetor
        
        var values = new Array(5);            
        var i = 0;
        
        while(x > 0)
        {                                       
            values[i] = itemValue.substring(0,x);//aqui ocorre a separação dos campos                
            itemValue = itemValue.substring(x+1,itemValue.length);//aqui é atualizada a string principal, retirando as informações dos campos que já foram guardado no vetor
            x = itemValue.indexOf("|"); 
            i = i +1;
        }     
        //Abaixo ocorre a alimentação dos campos, note que o segundo valor do vetor é o idproduct, e o mesmo é utilizado duas vezes
        $('#spadsImgRecommendedProd').attr("src", 'images/Product/' + values[0]);
        $('#spaidProduct').html(values[1]);
        $('#spaDsName').html(values[2]);
        $('#spadsDescription').html(values[3]);            
        $('#spavlPrice').html(values[4]);
        $('#spaLink').attr("href",'product.aspx?idproduct=' + values[1]);  
        
        $.fn.ShowRecommendedProdDetail();
    }        
    );
    $('label.SetValuesPopUpMain').click(function(){
    
            var itemIndex = $("label.SetValuesPopUpMain").index($(this));
            var itemId = "hdnSetValuesPopUpMain-" + itemIndex;//id do hidden que contém as informações do produto clicado
            var itemValue = $("#"+itemId).html();//value do hidden
            var x = itemValue.indexOf("|");//o marcador "|" é utilizado na separação dos campos, atualmente são 5 campos
            //no array abaixo criado será feito o split dos campos de forma que eles serão separados cada valor em um indice
            //caso seja necessário adicionar ou remover algum valor basta ajustar o vetor
            
            var values = new Array(5);            
            var i = 0;
            
            while(x > 0)
            {                                       
                values[i] = itemValue.substring(0,x);//aqui ocorre a separação dos campos                
                itemValue = itemValue.substring(x+1,itemValue.length);//aqui é atualizada a string principal, retirando as informações dos campos que já foram guardado no vetor
                x = itemValue.indexOf("|"); 
                i = i +1;
            }           
           //Abaixo ocorre a alimentação dos campos, note que o segundo valor do vetor é o idproduct, e o mesmo é utilizado duas vezes
            $('#spadsImgRecommendedProd').attr("src", 'images/Product/' + values[0]);
            $('#spaidProduct').html(values[1]);
            $('#spaDsName').html(values[2]);
            $('#spadsDescription').html(values[3]);            
            $('#spavlPrice').html(values[4]);
            $('#spaLink').attr("href",'product.aspx?idproduct=' + values[1]);    
            
            $.fn.ShowRecommendedProdDetail();         
    }        
    );
    $('#btZoomProdClose').click(function() {
            $('#divTransProd').removeClass('visiblediv');
            $('#divTransProd').addClass('invisiblediv');
            $('#divZoomProd').removeClass('visiblediv');
            $('#divZoomProd').addClass('invisiblediv');
            $(window).scrollTop(scrollTop);            
    });
    $('#btZoomProdRemClose').click(function(){
            $('#div_PopUp').removeClass('visiblediv');
            $('#div_PopUp').addClass('invisiblediv');
            $('#div_PopUp2').removeClass('visiblediv');
            $('#div_PopUp2').addClass('invisiblediv');
            
            $('#spadsImgRecommendedProd').attr("src", "");
            $('#spaidProduct').html("");
            $('#spaDsName').html("");
            $('#spadsDescription').html("");            
            $('#spavlPrice').html("");
            $('#spaLink').attr("href","");  
     });
    $(window).load(function() {

        setDivMaxScreenSize('divTransProd');
        setDivMaxScreenSize('div_PopUp');
    });
    $(window).resize(function() {

        setDivMaxScreenSize('divTransProd');
        setDivMaxScreenSize('div_PopUp');

        $('#divZoomProd').css('left', function() {
            var a = eval(document.documentElement.clientWidth) / 2;

            if (a > 375)
                return a - 375;
            else
                return 0;
        });
    });
    
    var arrColorBox = $(".jColor");
    var arrColorBoxZoom = $(".jColorBox");
    $(arrColorBox).mouseover(function() {
        var intIndex = arrColorBox.index(this);
        if (!$(arrColorBoxZoom[intIndex]).hasClass("jColorNoZoom"))
            $(arrColorBoxZoom[intIndex]).removeClass("invisiblediv");
    })
    .mouseleave(function() {
        var intIndex = arrColorBox.index(this);
        if (!$(arrColorBoxZoom[intIndex]).hasClass("jColorNoZoom"))
            $(arrColorBoxZoom[intIndex]).addClass("invisiblediv");
    });
});

var spadsImgRecommendedProd;
var spaidProduct;
var spaDsName;
var spavlPrice;
var spadsDescription;
var isN4 = (document.layers) ? true : false;
var isIE = (document.all) ? true : false;
var isDOM = (document.getElementById && !document.all) ? true : false;
var isFF = (navigator.userAgent.toLowerCase().indexOf("firefox") != -1) ? true : false;

function GetObject(id) {
    if (isDOM) {
        if (document.getElementById(id) != undefined)
            return document.getElementById(id);
    }
    else if (isN4) {
        if (document.layers[id] != undefined)
            return document.layers[id];
    }
    else if (isIE) {
        if (document.getElementById(id) != undefined)
            return document.getElementById(id);
    }
}
var isIE = (document.all) ? true : false;
function RenderCalendar(e, target, event) {
    var _referenceButton = document.getElementById(target);
    if (_referenceButton) {

        var _value = e.value.length;

        if (_value == 9) {
            _referenceButton.click();
        }
    }
}
function CepMask(e, event) {
    var currentKey = (isIE) ? event.keyCode : event.which;
    var iSize = e.value.length + 1;

    if (currentKey != 9 && currentKey != 8 && currentKey != 45 && currentKey != 46 && (currentKey < 35 || currentKey > 40)) {
        if ((currentKey < 48 || currentKey > 57) && (currentKey < 96 || currentKey > 105)) {
            event.returnValue = false;
        }
        else {
            if (iSize == 6) {
                e.value += '-';
            }
        }
    }
}
function pageLoad(sender, args)
{
    if (args.get_isPartialLoad())
    {
        var $ = jQuery.noConflict();

        $.fn.ShowRecommendedProdDetail = function(){

                $('#div_PopUp').removeClass('invisiblediv');
                $('#div_PopUp').addClass('visiblediv');
                $('#div_PopUp2').removeClass('invisiblediv');
                $('#div_PopUp2').addClass('visiblediv');
                
                $('#div_PopUp2').css('left', function(){
                    var a = eval(document.documentElement.clientWidth) / 2;
                    return a - 308;
                });
                
                $('#div_PopUp2').css('top', function() {
                    var b = (eval(getScrollHeight()) + eval(document.documentElement.clientHeight) / 2);                    
                    return b - 195;
                });
        };
        $('img.SetValuesPopUp').click(function(){
            var imgId = $(this).attr("id");
            var indexSplit = imgId.indexOf("-");
            var itemIndex = imgId.substring(indexSplit+1,imgId.length);//indice da imagem que foi clicada
            var itemId = "hdnSetValuesPopUp-" + itemIndex;//id do hidden que contém as informações do produto clicado
            var itemValue = $("#"+itemId).html();//value do hidden
            var x = itemValue.indexOf("|");//o marcador "|" é utilizado na separação dos campos, atualmente são 5 campos
            //no array abaixo criado será feito o split dos campos de forma que eles serão separados cadas valor em um indice
            //caso seja necessário adicionar ou remover algum valor basta ajustar o vetor
            
            var values = new Array(5);            
            var i = 0;
            
            while(x > 0)
            {                                       
                values[i] = itemValue.substring(0,x);//aqui ocorre a separação dos campos                
                itemValue = itemValue.substring(x+1,itemValue.length);//aqui é atualizada a string principal, retirando as informações dos campos que já foram guardado no vetor
                x = itemValue.indexOf("|"); 
                i = i +1;
            }     
            //Abaixo ocorre a alimentação dos campos, note que o segundo valor do vetor é o idproduct, e o mesmo é utilizado duas vezes
            $('#spadsImgRecommendedProd').attr("src", 'images/Product/' + values[0]);
            $('#spaidProduct').html(values[1]);
            $('#spaDsName').html(values[2]);
            $('#spadsDescription').html(values[3]);            
            $('#spavlPrice').html(values[4]);
            $('#spaLink').attr("href",'product.aspx?idproduct=' + values[1]);  
            
            $.fn.ShowRecommendedProdDetail();
        }        
        );
        $('label.SetValuesPopUp').click(function(){
        
                var itemIndex = $("label.SetValuesPopUp").index($(this));
                var itemId = "hdnSetValuesPopUp-" + itemIndex;//id do hidden que contém as informações do produto clicado
                var itemValue = $("#"+itemId).html();//value do hidden
                var x = itemValue.indexOf("|");//o marcador "|" é utilizado na separação dos campos, atualmente são 5 campos
                //no array abaixo criado será feito o split dos campos de forma que eles serão separados cada valor em um indice
                //caso seja necessário adicionar ou remover algum valor basta ajustar o vetor
                
                var values = new Array(5);            
                var i = 0;
                
                while(x > 0)
                {                                       
                    values[i] = itemValue.substring(0,x);//aqui ocorre a separação dos campos                
                    itemValue = itemValue.substring(x+1,itemValue.length);//aqui é atualizada a string principal, retirando as informações dos campos que já foram guardado no vetor
                    x = itemValue.indexOf("|"); 
                    i = i +1;
                }
                //Abaixo ocorre a alimentação dos campos, note que o segundo valor do vetor é o idproduct, e o mesmo é utilizado duas vezes
                $('#spadsImgRecommendedProd').attr("src", 'images/Product/' + values[0]);
                $('#spaidProduct').html(values[1]);
                $('#spaDsName').html(values[2]);
                $('#spadsDescription').html(values[3]);            
                $('#spavlPrice').html(values[4]);
                $('#spaLink').attr("href",'product.aspx?idproduct=' + values[1]);      
                
                $.fn.ShowRecommendedProdDetail();       
        }        
        );
       $('img.SetValuesPopUpMain').click(function(){
            var imgId = $(this).attr("id");
            var indexSplit = imgId.indexOf("-");
            var itemIndex = imgId.substring(indexSplit+1,imgId.length);//indice da imagem que foi clicada
            var itemId = "hdnSetValuesPopUpMain-" + itemIndex;//id do hidden que contém as informações do produto clicado
            var itemValue = $("#"+itemId).html();//value do hidden
            var x = itemValue.indexOf("|");//o marcador "|" é utilizado na separação dos campos, atualmente são 5 campos
            //no array abaixo criado será feito o split dos campos de forma que eles serão separados cadas valor em um indice
            //caso seja necessário adicionar ou remover algum valor basta ajustar o vetor
            
            var values = new Array(5);            
            var i = 0;
            
            while(x > 0)
            {                                       
                values[i] = itemValue.substring(0,x);//aqui ocorre a separação dos campos                
                itemValue = itemValue.substring(x+1,itemValue.length);//aqui é atualizada a string principal, retirando as informações dos campos que já foram guardado no vetor
                x = itemValue.indexOf("|"); 
                i = i +1;
            }     
            //Abaixo ocorre a alimentação dos campos, note que o segundo valor do vetor é o idproduct, e o mesmo é utilizado duas vezes
            $('#spadsImgRecommendedProd').attr("src", 'images/Product/' + values[0]);
            $('#spaidProduct').html(values[1]);
            $('#spaDsName').html(values[2]);
            $('#spadsDescription').html(values[3]);            
            $('#spavlPrice').html(values[4]);
            $('#spaLink').attr("href",'product.aspx?idproduct=' + values[1]);  
            
            $.fn.ShowRecommendedProdDetail();
        }        
        );
        $('label.SetValuesPopUpMain').click(function(){
        
                var itemIndex = $("label.SetValuesPopUpMain").index($(this));
                var itemId = "hdnSetValuesPopUpMain-" + itemIndex;//id do hidden que contém as informações do produto clicado
                var itemValue = $("#"+itemId).html();//value do hidden
                var x = itemValue.indexOf("|");//o marcador "|" é utilizado na separação dos campos, atualmente são 5 campos
                //no array abaixo criado será feito o split dos campos de forma que eles serão separados cada valor em um indice
                //caso seja necessário adicionar ou remover algum valor basta ajustar o vetor
                
                var values = new Array(5);            
                var i = 0;
                
                while(x > 0)
                {                                       
                    values[i] = itemValue.substring(0,x);//aqui ocorre a separação dos campos                
                    itemValue = itemValue.substring(x+1,itemValue.length);//aqui é atualizada a string principal, retirando as informações dos campos que já foram guardado no vetor
                    x = itemValue.indexOf("|"); 
                    i = i +1;
                }           
               //Abaixo ocorre a alimentação dos campos, note que o segundo valor do vetor é o idproduct, e o mesmo é utilizado duas vezes
                $('#spadsImgRecommendedProd').attr("src", 'images/Product/' + values[0]);
                $('#spaidProduct').html(values[1]);
                $('#spaDsName').html(values[2]);
                $('#spadsDescription').html(values[3]);            
                $('#spavlPrice').html(values[4]);
                $('#spaLink').attr("href",'product.aspx?idproduct=' + values[1]);    
                
                $.fn.ShowRecommendedProdDetail();         
        }        
        );
    $("#divTransProd").height(function() {
        var intHeght = $(document).height();
        $(this).height(intHeght);
    })
    .click(function() {
        $('#divTransProd').removeClass('visiblediv');
        $('#divTransProd').addClass('invisiblediv');
        $('#divZoomProd').removeClass('visiblediv');
        $('#divZoomProd').addClass('invisiblediv');
        $(window).scrollTop(scrollTop);  
    });
    $("#div_PopUp").click(function() {
        $('#div_PopUp').removeClass('visiblediv');
        $('#div_PopUp').addClass('invisiblediv');
        $('#div_PopUp2').removeClass('visiblediv');
        $('#div_PopUp2').addClass('invisiblediv');
        
        $('#spadsImgRecommendedProd').attr("src", "");
        $('#spaidProduct').html("");
        $('#spaDsName').html("");
        $('#spadsDescription').html("");            
        $('#spavlPrice').html("");
        $('#spaLink').attr("href","");  
    });
    }
}