$(document).ready(function() {
    $('#mainsearchbox').focus();
    //color space tabs
   $('div.themefoot').prepend('<a class = "morelink">More</a>');
   $('ul.details').after('<div class = "tabs"><h3 class = "active"><a class = "rgb">RGB</a></h3><h3><a class = "hsb">HSB</a></h3><h3><a class = "cmyk">CMYK</a></h3></div>');
   $('a.morelink').click(function() {
        $(this).toggleClass("less");
        var toggleActive = function(){
            details.children("li").children(".detail").hide();
            details.children("li").children(".detail." + a).show();
            details.parent().children('.tabs').children('h3').removeClass('active');
            details.parent().children('.tabs').children('h3').children('a.' + a).parent().addClass('active');
        };
        var details = $(this).parent().parent().children("ul.details");
        details.parent().children('.tabs').toggle();
        var a = (typeof(a) == 'undefined')?'rgb':a;
        details.toggle();
        details.children("li").children(".detail." + a).toggle();
        $('.tabs h3 .rgb').click(function(){
            a = 'rgb';
            toggleActive();
        });
        $('.tabs h3 .hsb').click(function(){
            a = 'hsb';
            toggleActive();
        });
        $('.tabs h3 .cmyk').click(function(){
            a = 'cmyk';
            toggleActive();
        });
        return false;
   });
    //star ratings
    var rateCB = function(v, l){
        var leg = $('span.legend', this.parentNode.parentNode);
        params = {rating: v, fromAJAX: true, theme:this.form.theme.value};
        $.post('/rate', params, function(data){
            leg.text("Your rating: " + v);
        });
    };
    $('.ratings label').hide();
    $('.ratings input[@type=submit]').hide();
    $('input[@type=radio].rating').rating({ required : true, callback:rateCB});
    $('.cur-rating-num').each(function(){
        var fr = $(this).text();
        var stars = Math.round(fr);
        var theHTML = ['<div class ="stars">'];
        for (var i = 1; i<= 5; i++){
            var isOn = (stars >= i)? ' star_on' : '';
            theHTML.push('<div class = "star star_readonly' + isOn + '"><a title = "'+fr + '">' + fr + '</a></div>' );
        }
        theHTML.push("</div>");
        $(this).after(theHTML.join(''));
    }); 
   
 });