// utility function to get the classnames of the samples from the id of the control
function extract_sample_from_ctl(obj){
    var which_id = obj.attr("id");
    var which_num = which_id.substring("control".length, which_id.length);
    
    var thumb = $("#sampleholder img")
        .filter(function(index) {
            return index == which_num;
        })
    ;
    
    var desc = $("#sampledescription img").filter(function(index) {
        return index == which_num;
    });
    
    
    var tb_id = "#sampledescription div#tb_" + which_num + " a:first-child";
    var tb = $(tb_id).filter(function(){
        var rel_id = $(this).attr("rel");
        return rel_id.substring("tb_".length, rel_id.length) == which_num;
    });
    
    return $([thumb, desc, tb]);
}




function set_design_controls() {
    // on load, turn on the first dot
    var current_ctl = $("#samplecontrols > a:first-child");
    
    // on load, turn on the first sample
    var current_sample = $([
        $("#sampleholder > img:first-child"),
        $("#sampledescription > img:first-child")
    ]);
    
    current_sample.each(function(){
        $(this).show();
    });

    current_ctl.addClass("control_on active");

    // set hover effect on the dots
    $("#samplecontrols > a").hover(
        function() {
            $(this).addClass("control_on");
        }, 
        function(){
            if(!/active/.test(this.className)){
                $(this).removeClass("control_on");
            }
        }
    );
    
    // for each of the dots, add the click effect: toggling the samples
    $("#samplecontrols > a").each(function(){
        $(this).click(function(){                            
            var which_sample = extract_sample_from_ctl($(this)); // should return an array wrapped with jQuery
            
            $(current_sample).each(function(){
                $(this).toggle();
            });
            
            $(which_sample).each(function(){
                $(this).toggle();
            });

            $(this).addClass("control_on active");
            $(current_ctl).removeClass("control_on active");
            
            current_ctl = this;
            current_sample = which_sample;
            
            
            // for each of the dots, get the filename, minus the extension
            // that is, take the src, trim off everything but
        });
    });
}

$(document).ready(function() {
    set_design_controls();
});