/// <reference path="jquery.js" />

var menuHeight;
var secondMenuHeight;
var thirdMenuHeight;

$(document).ready(function() {
	setWhatsHotImages();

	$('#p3_menu').mouseleave(function() {
		$('.p3_menu .secondLevel').find('.layerbodycontainer').eq(0).attr("lastlayerlink", "");
		$('.p3_menu').find('.layerlinkcontainer').eq(0).find('.layerlink').removeClass('selected');
		$('.p3_menu .secondLevel').hide();
	});
	
    $(".firstLevel .layerlink").click(function (e) { 
		if( $(this).find("a").eq(0).attr('href') == '#' ) {
			link_positionBody($(this));
			e.preventDefault();
		} else {
			window.location = $(this).find("a").eq(0).attr('href');
		}
	});
	
    $(".secondLevel .layerlink").mouseenter(function (e) { 
		if( $(this).find("a").eq(0).attr('href') == '#' ) {
			$(this).parent().find(".layerlink").removeClass('selected');
			$(this).addClass('selected');
			e.preventDefault();
			var bodyName = $(this).attr('id') + 'Body';
			var thirdLvl = $(this).parent().next('.thirdLevel');
			thirdLvl.find('.layerbody').hide();
			thirdLvl.height( thirdLvl.find('#'+bodyName).height() );
			thirdLvl.find('#'+bodyName).show();
		} else {
		
		}
	}).click(function (e) { 
		if( $(this).find("a").eq(0).attr('href') != '#' ) {
			window.location = $(this).find("a").eq(0).attr('href');
		}
	});
	
	menuHeight = $('.p3_menu').height();
});


function link_positionBody(targetLink, level) {
    //positions given link body in the appropriate linkbodycontainer
    //linkbodycontainer is assumed to be the next DIV
    //after the container of the link item
    //one caveat is that the linkcontainer MUST have dimensions set
    //cause floated elements don't grow the container

    //Caveats:
    //- LayerBodyContainer width follows the LayerLinkContainer's width. might have issues
    //- for added effect, we could add a class to the siblings of all the link items to have a selected look

    var parent = targetLink.parent();
    var bodyContainer = targetLink.parent().next("div").find('.layerbodycontainer').eq(0);
    var bodyContainerBG = bodyContainer.parent();

    //see if we were the last link the body container was clicked
    if (bodyContainer.attr("lastlayerlink") == targetLink.attr("id")) {
        //if this link is top level
        //ie, parent's parent does NOT have the layerbody class set
        //then we will hide the bodycontainer instead
        if (parent.parent().hasClass("layerbody") == false) {
            //we are top level, and same menulink clicked, so hide
            //body container instead
            bodyContainer.attr("lastlayerlink", "");
            bodyContainer.hide();
			bodyContainerBG.hide();
			targetLink.removeClass("selected");
            return;
        } else {
            //in any case, the requested body
            //should already be visible, so just exit to
            //conserve processing
            return;
        }
    }
    //hide all other children in body
    bodyContainer.children().hide();
    //position body container underneath our parent
    //body container will be stretched to match the parent
    var parentOffset = parent.offset();
    bodyContainer.show();
	bodyContainerBG.show();

    bodyContainer.offset({ top: parentOffset.top + parent.height(), left: parentOffset.left });
    bodyContainer.width(parent.width());
	
    //body content has the id of the layeritem + body
    var targetBody = bodyContainer.children("#" + targetLink.attr("id") + "Body");
    targetBody.show();
	bodyContainerBG.height( targetBody.height() );
	
    //mark that this bodycontainer's last click was the given item
    bodyContainer.attr("lastlayerlink", targetLink.attr("id"));
	
	//highlight parent link
	parent.children().removeClass("selected");
	targetLink.addClass("selected");

    //if it happens that the child in the give body is a 
    //linkcontainer, show the first link
    var targetBodyLinkContainer = targetBody.children(".layerlinkcontainer");
    if (targetBodyLinkContainer.length != 0) {
		var tl = targetBodyLinkContainer.next('.thirdLevel');
		if( $(window).width() > 920 ) {
			if( ($(window).width()-tl.width()) > 0 ) {
				//tl.css('left', -( ($(window).width() - tl.width()) * 0.5 ) + 'px'); 
				////tl.css('left', -( ($(window).width() - 920) * 0.5 ) + 'px'); 
				////tl.width( $(window).width() );
			}
		}
        //we have a link container, call show link on the first child
        link_positionBody(targetBodyLinkContainer.children(".layerlink").first());
    }
}

function setWhatsHotImages() {
	var urlSecure = ('https:' == document.location.protocol) ? 'https://www.digi.com.my' : 'http://www.digi.com.my';
	$('.whatsHotImages').each(function() {
		$(this).attr( 'src', urlSecure + $(this).attr('src') );
	});
}