/// <reference name="MicrosoftAjax.js" /> 
/// <reference name="MicrosoftAjax.debug.js" /> 
/// <reference name="Telerik.Web.UI.Common.Core.js" assembly="Telerik.Web.UI" /> 
/// <reference name="Telerik.Web.UI.Common.Animation.AnimationScripts.js" assembly="Telerik.Web.UI" /> 
/// <reference name="Telerik.Web.UI.Common.Navigation.NavigationScripts.js" assembly="Telerik.Web.UI" />
/// <reference name="Telerik.Web.UI.RadMenu.RadMenuScripts.js" assembly="Telerik.Web.UI" />

var rmSlide;
function OnClientItemOpened(sender, args) {
    var item = args.get_item();
    var items = args.get_item().get_items();    
    var element = item.get_element();    

    //get the viewport width
    var vp = $telerik.getViewPortSize();       
    var slideWidth = vp.width    
    
    //take of scrollbar width
    if ($telerik.isIE)
        slideWidth += 6;
    else
        slideWidth -= 11;

    //set the minimum width to be the total items by the first items width
    var firstItem = items.getItem(0).get_element();
    var size = $telerik.getOuterSize(firstItem);
    var itemWidth = size.width; //the width of the item
    var minWidth = itemWidth * items.get_count();
    if (slideWidth < (minWidth)) slideWidth = (minWidth);
   
    //find the rad menu slider and move it left and set its width
    var divs = element.getElementsByTagName("div");
    for (var i = 0; i < divs.length; i++) {
        if (divs[i].className == "rmSlide") {
            rmSlide = divs[i];
            var bounds = Sys.UI.DomElement.getBounds(rmSlide);
            setTimeout("rmSlide.style.left = -1 * " + bounds.x + " + \"px\"; rmSlide.style.width=" + slideWidth + " + \"px\";", 10);            
        }    
    }
}