$(function(){                     
    init_dropdown('yarns_dd', 'yarns_dd_link');      
    init_dropdown('patterns_dd', 'patterns_dd_link');      
    init_dropdown('new_products_dd', 'new_products_dd_link');      
    init_dropdown('in_the_know_dd', 'in_the_know_dd_link');      
});

function init_dropdown(dropdown_id, dropdownlink_id, align, align_offset, valign, valign_offset, fn_over, fn_out){
    if (align == null){
        align = 'left';    
    }   
    if (align_offset == null){
        align_offset = 0;    
    }     
    
    if (valign == null){
        valign = 'bottom';    
    }   
    if (valign_offset == null){
        valign_offset = 10;    
    }   
    //$('#' + dropdown_id + ' ul').css('margin', '10px');
    $('#' + dropdown_id + ' ul').css('margin-top', '10px');
 
    $('#' + dropdownlink_id).show(); 
    $('#' + dropdown_id).show();
    
    $('#' + dropdown_id).css('font-weight','bold')
        .css('width',$('#' + dropdown_id).outerWidth())
        .css('font-weight','normal');  
    $('#' + dropdown_id + ' ul li a').width($('#' + dropdown_id).width()); 
    $('#' + dropdown_id).width(''); 
                                                                  
    var offsetx = $('#' + dropdownlink_id).position();   
    
    if (align == 'left'){ 
        //$('#' + dropdown_id).css('left', ((offsetx.left - 10) + align_offset) + 'px');
        $('#' + dropdown_id).css('left', ((offsetx.left - 0) + align_offset) + 'px');
    }
    else{   
        //$('#' + dropdown_id).css('left', (offsetx.left + 10 + $('#' + dropdownlink_id).outerWidth() - $('#' + dropdown_id).width() - align_offset) + 'px');
        $('#' + dropdown_id).css('left', (offsetx.left - 0 + $('#' + dropdownlink_id).outerWidth() - $('#' + dropdown_id).width() - align_offset) + 'px');
    }
    
    if(valign == 'bottom'){   
        $('#' + dropdown_id).css('top', ((offsetx.top - valign_offset) + $('#' + dropdownlink_id).outerHeight()) + 'px');         
    }
    else{  
        $('#' + dropdown_id).css('top', (offsetx.top - valign_offset) + 'px');  
    }                                                                                                      
    
    $('#' + dropdown_id).hide();                                 
    
    $('#' + dropdownlink_id).bind('mouseover.' + dropdown_id + ' mousemove.' + dropdown_id, function(e){  
        openDropDown(dropdown_id, fn_over);                                                                                     
    });  

    $('body').bind('mousemove.' + dropdown_id, function(e){
        hideDropDown(dropdown_id, dropdownlink_id, fn_out, e);                                                                   
    });  
}

function openDropDown(dropdown_id, fn_over){
    //if($('.drop_down [style=\'display=none\']').length == 0){     something like this for ie7 only style doesn't work well, should add data and check for that
    if($('#' + dropdown_id).css('display') == 'none'){
        $('#' + dropdown_id).show();   
        if($.isFunction(fn_over)){
            fn_over();        
        }                             
    } 
}

function hideDropDown(dropdown_id, dropdownlink_id, fn_out, e){
    var $target = $(e.target);                          
    if ($('#' + dropdown_id)) {  
        if($('#' + dropdown_id).css('display') != 'none'){
            if(!(lcIsMouseOver("#" + dropdown_id, e))){ 
                if(!(lcIsMouseOver("#" + dropdownlink_id, e))){               
                    $('#' + dropdown_id).hide();     
                    if($.isFunction(fn_out)){
                        fn_out();        
                    }           
                }
            }
        } 
    } 
}                 

function lcIsMouseOver(item, e) {
    var MyMouseOver = false;
    var offsetx = $(item).offset();
    offsetx.right = offsetx.left + $(item).outerWidth(); 
    offsetx.bottom = offsetx.top + $(item).outerHeight();    
    //alert(e.pageX + ':' + e.pageY + ' div=' + offsetx.left + ':' + offsetx.top + ' -> ' + offsetx.right + ':' + offsetx.bottom);
    if ((e.pageX > offsetx.left) && (e.pageX < offsetx.right) &&
        (e.pageY > offsetx.top) && (e.pageY < offsetx.bottom)) {
        MyMouseOver = true;        
    }
    return MyMouseOver;
}