// JavaScript Document
$(document).ready(function () {

    // Mega menu
    $('#jqMdd li').mouseenter(function () {
        //var currentLi = $(this);
        //var currentOffset = currentLi.offset();
        var currentID = $(this).attr('id');
        $(".mdd-section ul").removeClass();
        switch (currentID) {
            case 'nav-home': $(".sec1 ul").addClass("active");
                break;
            case 'nav-gardening': $(".sec2 ul").addClass("active");
                break;
            case 'nav-wildlife': $(".sec3 ul").addClass("active");
                break;
            case 'nav-seasonal': $(".sec4 ul").addClass("active");
                break;
            case 'nav-gifts': $(".sec5 ul").addClass("active");
                break;
        }

        //Moved to /js/jquery.dropdown.js to delay the display of the menu : improves usability
//        var submenu = $('.mdd-wrapper');
//        submenu.css({
//            position: 'absolute',
//           top: currentOffset.top - 110
//        }).show()
    })
	.mouseleave(function () {
	    $('.mdd-wrapper').hide();
	});

    $('.mdd-section ul').mouseenter(function () {
        $(this).addClass("active");
    }).mouseleave(function () {
        $(this).removeClass("active");
    });

    $('.mdd-wrapper').mouseenter(function () {
        $('.mdd-wrapper').show();
    }).mouseleave(function () {
        $('.mdd-wrapper').hide();
    });

   
    


    // Carousel and product imagery hover effects
    $('.thumb-view img').mouseover(function () {
        var currentImage = $(this);
        funcOverlay(currentImage);
    }).mouseout(function () {
        $('.prod-overlay').hide();
    });

    $('.prod-overlay').mouseenter(function () {
        $('.prod-overlay').show();
    }).mouseleave(function () {
        $('.prod-overlay').hide();
    });

   // $('.gallery-overlay').mouseenter(function () {
  //      $('.gallery-overlay').show();
  //  }).mouseleave(function () {
  //      $('.gallery-overlay').hide();
  //  });

    // These conflict with homepage Carousels. moved to functionsProducts.js
    // $(".zoom a").fancybox();
    // $(".product-main-image a").fancybox();

    
//    $('.carousel-small-img img').mouseover(function () {
//        var currentImage = $(this);
//        funcOverlay(currentImage);
//    }).mouseout(function () {
//        $('.prod-overlay').hide();
//    });
     



});


$(window).load(function () {

    //    $('.product-img img').mouseover(function () {
    //       // $(this).load();
    //        var currentImage = $(this);
    //        //alert(currentImage.attr('class'))
    //        if ('gallery' != currentImage.attr('class')) {
    //            funcOverlay(currentImage);
    //        }
    //        }).mouseout(function () {
    //            $('.prod-overlay').hide();
    //    });
      

      

    //  $('.product-img img.gallery').mouseover(function () {
    //        var currentImage = $(this);
    //        funcOverlayGallery(currentImage);
    //     }).mouseout(function () {
    //          $('.gallery-overlay').hide();
    //   });

});




function getHeight(el, fn) {
    var img = new Image();
    img.onload = function () { fn(img.height); };
    img.src = el.attr("src");
}


function funcOverlay(currentImg) {
  // alert('yo');
    //alert(currentImg.attr('width'));
    var currentOffset = currentImg.offset();
    var windowWidth = $(window).width();
    var currentLeft = currentOffset.left + 95;
    var prodOverlay = $('.prod-overlay');
    var overlayWidth = prodOverlay.width();
    if ((currentLeft + overlayWidth) > windowWidth) {
        currentLeft = currentLeft - overlayWidth;
    }

    var imgOverlay = $('.prod-overlay-img img');
    //imgOverlay.attr('src', currentImg.attr('src'));

    // Loop thorugh the overlay's html which resides at the bottom of each page before 
    // the closing </body> tag and substitute the current mouse-hover product's details into the overlay
    var currentProductInfoIdentifier = currentImg.attr('class')

    //alert($('.product-img.' + currentProductInfoIdentifier).html())

    $('.prod-overlay-img').html($('.product-img.' + currentProductInfoIdentifier).html());

    // Now the overlay image will have the listing css attributes and smaller dimensions
    // We'll have to reset the overlay's width and height values 
    var imgOverlayViaNewCss = $('.prod-overlay-img img.' + currentProductInfoIdentifier);

    imgOverlayViaNewCss.attr('width', 236);
    imgOverlayViaNewCss.attr('height', 236);

    // Begin: Substitute the current mouse-hover product's details into the overlay    
    $('.price-info ul li').each(function (index) {

        if ('product-type-text' == $(this).attr('class')) {
            $(this).html($('.product-name.' + currentProductInfoIdentifier + '').html());
        }
        if ('product-detail' == $(this).attr('class')) {
            $(this).text($('.product-desc.' + currentProductInfoIdentifier).text());
        }
        if ('product-price' == $(this).attr('class')) {
            $(this).html($('.product-price-final.' + currentProductInfoIdentifier).html());
        }
    });

    $('.prod-overlay-img-detail .stock-info').each(function (index) {
        $(this).html($('.product-stock-info.' + currentProductInfoIdentifier).html());
    });
    // End: Substitute the current mouse-hover product's details into the overlay    

    prodOverlay.css({
        position: 'absolute',
        top: currentOffset.top - 31,
        left: currentLeft
    }).fadeIn(500)
}

function funcOverlayGallery(currentImg) {
    var currentOffset = currentImg.offset();
    var windowWidth = $(window).width();
    var currentLeft = currentOffset.left + 95;
    var prodOverlay = $('.gallery-overlay');
    var overlayWidth = prodOverlay.width();
    if ((currentLeft + overlayWidth) > windowWidth) {
        currentLeft = currentLeft - overlayWidth;
    }

    var imgOverlay = $('.gallery-overlay-img img');
    imgOverlay.attr('src', currentImg.attr('src'));
    imgOverlay.attr('width', 236);
    imgOverlay.attr('height', 236);

//    var imageRatio = 0;
//    getHeight(currentImg, function (imageHeight) {
//        // what you need to do with the height value here
//        var imageWidth = currentImg.attr('width');

//        if (0 < imageWidth) {
//            imageRatio = imageHeight / imageWidth;
//            //alert(imageHeight);
//            //alert(imageRatio);

//            var imageOverlayWidth = imgOverlay.attr('width');
//            //alert(imageRatio);
//            if (0 < imageOverlayWidth) {
//                //alert('imageOverlayWidth: ' + imageOverlayWidth);
//                varOverlayHeight = Math.ceil(imageOverlayWidth * imageRatio);
//                //alert('varOverlayHeight: ' + varOverlayHeight);
//                imgOverlay.attr('height', varOverlayHeight);
//                prodOverlay.css({height: varOverlayHeight});
//            }
//        }

    //});

    //alert(imgOverlay.height());

    var offSetBy = 31;

//    if (1 < imageRatio) {
//        offSetBy = 500;
//    }

    prodOverlay.css({
        position: 'absolute',
        top: currentOffset.top - offSetBy,
        left: currentLeft
    }).fadeIn(500)
}