var selFamily = 1;
var tm = null;
var selPopup = "";

function showFamilyPopup(ob, id) {
    if (tm != null) {
        clearTimeout(tm);
        tm = null;
    }
    changeFamilyColor(ob, true);
    
    var obj = document.getElementById("FamilyPopup_" + id);
    obj.style.display = "block";
    selPopup = id;
    var x = 0, y = 0;
    while (ob && ob.offsetParent != ob) {
        x += ob.offsetLeft;
        ob = ob.offsetParent;
    }

    ob = document.getElementById("selector");
    while (ob && ob.offsetParent != ob) {
        y += ob.offsetTop;
        ob = ob.offsetParent;
    }
    y = y - obj.offsetHeight;
    if (x + obj.offsetWidth > $(window).width()) {
        x = x - ((x + obj.offsetWidth) - $(window).width());
    }

    obj.style.top = y + "px";
    obj.style.left = x + "px";
}
function hideFamilyPopup(id) {
	if (document.getElementById("FamilyPopup_" + id))
	    document.getElementById("FamilyPopup_" + id).style.display = "none";
	changeFamilyColor(document.getElementById("car_" + id), false);
}
function hideFamily(id) {
    if (selPopup != "" && selPopup!=id)
        document.getElementById("FamilyPopup_" + selPopup).style.display = "none";
}
function hideFamilyTimeout(id) {
    if (selPopup != "" && selPopup != id && tm == null) {
        tm = setTimeout("hideFamilyPopup('" + selPopup + "')", 2000);
    } else if(selPopup != "" && selPopup != id) {
        document.getElementById("FamilyPopup_" + selPopup).style.display = "none";
    }
}
function hideFamilyPopupTimeout(id) {
    if(selPopup!=id && selPopup!="") tm = setTimeout("hideFamilyPopup('"+id+"')", 2000);
}

function hideFamilies(obj)
{
	var families = obj.split(";");
	for(k=0;k<families.length;k++) {
		 hideFamilyPopup(families[k]);
	}
}


function showFamily(id) {
    if (id == selFamily) return;
    var family = document.getElementById("Family_" + id);
    document.getElementById("Family_" + id).style.display = "block";
    var elemCufonize = $('#Family_' + id + ' .navigationText2');
    var arrayOfElms = [];
    for (var i = 0; i < elemCufonize.length; i++) {
        if (elemCufonize[i].style.height == "") {
            var elHeight = elemCufonize[i].offsetHeight;
            //alert(elHeight);
            var dif = (40 - elHeight) + ((40 - elHeight) / 2);
            elemCufonize[i].style.paddingTop = ((40 - elHeight) / 2) + "px";

            if (dif < 40) elHeight--;
            elemCufonize[i].style.height = "10px";
        }
    }

    var home = $('.HomeGroup');
    var maxWidth = 960;
    document.getElementById("Family_" + id).style.display = "block";
    document.getElementById("Pointer_" + selFamily).style.display = "none";
    document.getElementById("Pointer_" + id).style.display = "block";

    for (i = 0; i < home.length; i++) {

        maxWidth = maxWidth - home[i].offsetWidth;
    }

    if (id > 1) maxWidth = maxWidth - home.length - 1;
    else maxWidth = maxWidth - home.length - 4;


    document.getElementById("Family_" + id).style.width = "0px";
    //document.getElementById("Family_"+selFamily).style.display="none";

    //$('#Family_'+selFamily).stop().animate({
    //        width: "0px"
    //}, 200, function() {
    //    document.getElementById("Family_"+selFamily).style.display="none";
    //    selFamily = id;
    //} );
    //$('#Family_'+id).stop().animate({
    //        width: maxWidth+"px"
    //}, 200 );
    //alert(selFamily);

    changeFamilyWidth(maxWidth, id, selFamily);


}
function changeFamilyWidth(maxWidth, id, sel) {
    var selectedFamily = document.getElementById("Family_" + sel);
    var currentFamily = document.getElementById("Family_" + id);
    var changed = false;

    if (currentFamily.offsetWidth < maxWidth) {
        if (currentFamily.offsetWidth + 40 > maxWidth) {
            currentFamily.style.width = (maxWidth) + "px";
        } else {
            currentFamily.style.width = (currentFamily.offsetWidth + 40) + "px";
        }

        changed = true;
    }
    if (selectedFamily.offsetWidth > 0) {
        if (selectedFamily.offsetWidth < 40) {
            selectedFamily.style.width = "0px";
        } else {
            selectedFamily.style.width = (selectedFamily.offsetWidth - 40) + "px";
        }
        changed = true;
    }


    if (changed) {
        setTimeout("changeFamilyWidth(" + maxWidth + ",'" + id + "','" + selFamily + "')", 2);
    } else {
        document.getElementById("Family_" + selFamily).style.display = "none";
        selFamily = id;

    }
}

var tm = null;
function scrollNav(toLeft, id) {
    var leftsize = document.getElementById(id).offsetLeft;
    if (toLeft) {
        var cars = $('#' + id + ' div.car');
        var carsLength = 0;
        for (j = 0; j < cars.length; j++) {
            carsLength = carsLength + cars[j].offsetWidth;
        }
        var home = $('.HomeGroup');
        var maxWidth = 960;
        for (i = 0; i < home.length; i++) {
            maxWidth = maxWidth - home[i].offsetWidth;
        }
        maxWidth = maxWidth - 30;
        if (carsLength + document.getElementById(id).offsetLeft > maxWidth) {
            document.getElementById(id).style.left = (leftsize - 10) + "px";
            //alert(document.getElementById(id).offsetLeft+"="+carsLength+"="+maxWidth);
            tm = setTimeout("scrollNav(true,'" + id + "')", 70);
        } else {
            //alert((carsLength+document.getElementById(id).offsetLeft)+"="+maxWidth);
        }
    } else {
        if (leftsize == 0) return;
        document.getElementById(id).style.left = (leftsize + 10) + "px";
        tm = setTimeout("scrollNav(false,'" + id + "')", 70);
    }

}
function clearScroll() {
    clearTimeout(tm);
}

function setHomePageCufon() {

    
    Cufon.now();
    var elemCufonize = $('.navigationText');
    var arrayOfElms = [];
    for (var i = 0; i < elemCufonize.length; i++) {
        arrayOfElms.push(elemCufonize[i]);
    }
    var elemCufonize = $('.RangePopoupTitle');
    for (var i = 0; i < elemCufonize.length; i++) {
        arrayOfElms.push(elemCufonize[i]);
    }
    //Cufon.replace(arrayOfElms);

    var elemCufonize = $('.navigationText2');
    var arrayOfElms = [];
    for (var i = 0; i < elemCufonize.length; i++) {
        arrayOfElms.push(elemCufonize[i]);
    }
    //Cufon.replace(arrayOfElms);


    var elemCufonize = $('.navigationText');
    var arrayOfElms = [];
    for (var i = 0; i < elemCufonize.length; i++) {
        var elHeight = elemCufonize[i].offsetHeight;
        var dif = (40 - elHeight) + ((40 - elHeight) / 2);
        elemCufonize[i].style.paddingTop = ((40 - elHeight) / 2) + "px";

        if (dif < 40) elHeight--;
        elemCufonize[i].style.height = (40 - elHeight) + "px";
    }

    var home = $('.HomeGroup');
    var maxWidth = 960;
    for (i = 0; i < home.length; i++) {

        maxWidth = maxWidth - home[i].offsetWidth;
        if (i == home.length - 1) maxWidth = maxWidth + home.length;
    }
    var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
    var is_opera = navigator.userAgent.toLowerCase().indexOf('opera') > -1;
    var homeDiv = $('.HomePageFamilies');
    var wt = maxWidth;
    for (i = 0; i < home.length; i++) {
        if (home.length == 1) {
            if (is_chrome || is_opera) homeDiv[0].style.width = (maxWidth - 3) + "px";
            else homeDiv[0].style.width = (maxWidth - 3) + "px";
        } else {
            homeDiv[0].style.width = (maxWidth - 9) + "px";
        }
        
        lp = i + 1;
        if (is_chrome || is_opera) {
            wt = maxWidth + 3;
            if (i == 0) {
                wt = wt - 3;
            }
        }
        if (document.getElementById("MaskRight" + lp)) document.getElementById("MaskRight" + lp).style.left = (wt - 47) + "px";

        var cars = $('#Cars_' + lp + ' div.car');
        var carsLength = 0;
        for (j = 0; j < cars.length; j++) {
            carsLength = carsLength + cars[j].offsetWidth;
        }
        if (carsLength < maxWidth - 20) {
            document.getElementById("MaskLeft" + lp).style.display = "none";
            document.getElementById("MaskRight" + lp).style.display = "none";
            if(cars.length>0) cars[0].style.paddingLeft = "10px";
        }
    }


}

function changeFamilyColor(ob, isOn) {
    if (isOn) {
        ob.style.height = "30px";
        ob.style.backgroundColor = "#EDEDED";
        ob.firstChild.style.color = "#000000";
    } else {
        ob.style.backgroundColor = "transparent";
        ob.firstChild.style.color = "#FFFFFF";
    }
}