$(function(){
    
    $("#carousel").jcarousel({
        visible: 1,
        scroll: 1,
        circular: false,
        initCallback: function(instance){
            /* hide the arrows if the items visible are less than the items in the portfolio */
            if(instance.options.visible == instance.list.children().length) {
                instance.clip.width('938px');
                instance.container.css('padding', '0px');
                instance.buttonNext.hide();
                instance.buttonPrev.hide();
            }
            /* disable the prev button */
            else {
                instance.buttonPrev.css('opacity', '0.3');
            }
        },
        buttonNextCallback: function(instance, elem, status) {
            (status) ? instance.buttonPrev.css('opacity', '0.3') : instance.buttonPrev.css('opacity', '');
        },
        buttonPrevCallback: function(instance, elem, status){
            (status) ? instance.buttonNext.css('opacity', '0.3') : instance.buttonNext.css('opacity', '');
        }
    });

    $("a[rel^='prettyPhoto']").prettyPhoto({
        theme: 'pph_theme',
        allowresize: true,
        animationSpeed: 'fast',
        changepicturecallback: function(){
            // this resize should be dynamic
        },
        markup: '<div class="pp_pic_holder">\
                    <a href="#" class="pp_arrow_previous">Previous</a> \
                    <a href="#" class="pp_arrow_next">Next</a> \
                    <div class="pp_top"> \
                        <div class="pp_left"></div> \
                        <div class="pp_middle"></div> \
                        <div class="pp_right"></div> \
                    </div> \
                    <div class="pp_content_container"> \
                        <div class="pp_left"> \
                        <div class="pp_right"> \
                            <div class="pp_content"> \
                                <div class="pp_fade"> \
                                    <a class="pp_close" href="#">Close</a> \
                                    <a href="#" class="pp_expand" title="Expand the image">Expand</a> \
                                    <div class="pp_loaderIcon"></div> \
                                    <div class="pp_hoverContainer"> \
                                        <a class="pp_next" href="#">next</a> \
                                        <a class="pp_previous" href="#">previous</a> \
                                    </div> \
                                    <div id="pp_full_res"></div> \
                                    <div class="pp_nav"> \
                                    </div>\
                                    <div class="pp_details clearfix"> \
                                        <p class="pp_description"></p> \
                                        <p class="currentTextHolder">0/0</p> \
                                    </div> \
                                </div> \
                            </div> \
                        </div> \
                        </div> \
                    </div> \
                    <div class="pp_bottom"> \
                        <div class="pp_left"></div> \
                        <div class="pp_middle"></div> \
                        <div class="pp_right"></div> \
                    </div> \
                </div> \
                <div class="pp_overlay"></div> \
                <div class="ppt"></div>'
    });
});