$(document).ready(function() {

// Standard button hover effect. Shift background image position to -1 x height.
    $("input[type=submit],input[type=button],.hover_button,.button_register").hover(
        function() {
            var height = "-" + $(this).css('height');
            var position = "0 " + height;
            $(this).css({ backgroundPosition: position });
        },
        function() {
            $(this).css({ backgroundPosition: "0 0px" });
        }
    );

    // Standard button click effect. Shift background image position to -2 x height.
    $("input[type=submit],input[type=button],.hover_button").mousedown(function() {
        var height = 2 * parseFloat($(this).css('height').replace('px', ''));
        position = "0 -" + height + "px";
        $(this).css({ backgroundPosition: position });
    });
    
    //Display product page tabs.
    ProductMenuSetup();
    ProductZoomSetup();
    BuildTabs();
    ProductSizeButtonsSetup();
    RegistrationFormSetup();

});

/*
Base code from:
http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/
*/
function BuildTabs() {

    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).show(); //Fade in the active ID content
        return false;
    });
}

function ProductSizeButtonsSetup() {
    
    var currentSizeValue = $('#Size').val();
    var backgroundColorSelected = '#cccccc';
    
    // Remove popup large image click event from medium image.
    $img = $('.product_col_left img[id^=ProductPic]').removeAttr("onclick");
    
    // Set standard drop down list value (hidden) when size button clicked.
    $('.product_size_button').click(function() {
        var sizeValue = $(this).attr('value');
        $('#Size').val(sizeValue);
        $('.product_size_button').css('background-color', 'Transparent');
        $(this).css('background-color', backgroundColorSelected);
    });
    
    // If standard drop down list (hidden) has value then set button selected style.
    // This occurs if a button is pressed and the page is refreshed.
    if (currentSizeValue != null && currentSizeValue.charAt('-') != 1) {
        var selector = '.product_size_button[value=' + currentSizeValue + ']';
        $(selector).css('background-color', backgroundColorSelected);
    }
}

function ProductZoomSetup() {

    var isLargeImage = $('.product_col_left .ClickLargerImage').length;
    if (isLargeImage) {
        // Add anchor wrapper required by jqzoom to product medium image.
        $img = $('.product_col_left img[id^=ProductPic]').wrap(function() {
            var src = $(this).attr('src').replace('medium', 'large');
            return '<a href="' + src + '" class="ProductZoom" title="Zoom">' + $(this).text() + '</a>';
        });
        // Initialize jqzoom.
        $('.ProductZoom').jqzoom({
            zoomWidth: 396,
            zoomHeight: 442,
            xOffset: 98,
            yOffset: 35,
            title: false,
            showPreload: true,
            showEffect: 'fadein',
            fadeinSpeed: 'medium'
        });
    }
    
    $('.thumbnail_holder img').click(function(){
        var src = $(this).attr('src').replace('micro', 'large');
        src = src.replace('.jpg', '_.jpg');
        $('a.ProductZoom').attr('href', src);
    });
    
    $('.product_col_left .thumbnail_holder img').click(function() {
        $('.ProductZoom').trigger('changeImgSrc.aydus');
    });
}

function ProductMenuSetup() {

    // Get the breadcrumb category and set the matching left navigation category to class = selected.
    // Note that products can be in multiple categories.
    var currentCategory = $('#BreadCrumbPanel a.SectionTitleText').html();
    var menuCategoryName;
    
    if (currentCategory != null) {
        $('.left_sidebar_panel li.tame a').each(function() {
            menuCategoryName = $(this).html();
            if (menuCategoryName == currentCategory) {
                $(this).addClass('selected');
            }
        });
    }
}

function RegistrationFormSetup() {

    RoleValueToDisplay = 'Designer';
    var $fields = $('.registration_holder .DesignerDetails');
    var show = 'table-row';
    // IE6&7 don't support css property table-row.  Using block property breaks design in Firefox.  Use conditional css property based on browser.
    if ($.browser.msie && $.browser.version <= 7) {
        var show = 'block';
    }

    // If community role = 'Designer' chosen from drop down list then show additional designer registration fields.
    $('#ddlCommunityRole').change( function(){
        var value = $(this).val();
        if (value == RoleValueToDisplay) {
            $fields.css('display', show);
        }
        else {
            $fields.css('display', 'none');
        }
    });
    
    // If community role already set then display additional designer registration fields.
    // This occurs if a list item is selected and the page is refreshed.
    if ($('#ddlCommunityRole').val() == RoleValueToDisplay) {
        $fields.css('display', show);
    }
}