function toggleSubNav(el, type)
{
    if (!document.getElementById(type + '-nav')) {
        return false;
    }
    
    el.className = (el.className == "selected" ? "" : "selected");

    $("#" + type + "-nav").slideToggle("fast");

    return false;
}

/**
 * Setup / Start rotating images in homepage carousel
 */
function startCarousel()
{
    $('#flash-intro').hide();
    $('#home-carousel').show();
    var carousel = $('#home-carousel .carousel').get(0);
    $(carousel).addClass("current");

    rotatePanels();
}

/**
 * Rotate images in carousel panels
 */
function rotatePanels()
{
    var curCarousel = $('#home-carousel .carousel.current').get(0);
    var curPanels = $('#home-carousel .carousel.current .panel');
    
    var fadeInTime = 2500;
    var fadeOutTime = 2500;
    
    var panel = curPanels.get(0);
    $(panel).fadeIn(fadeInTime, function () {
        var panel = curPanels.get(1);
        $(panel).fadeIn(fadeInTime, function () {
            var panel = curPanels.get(2);
            $(panel).fadeIn(fadeInTime, function () {
                setTimeout(function () {
                    $(curCarousel).fadeOut(fadeOutTime, function () {
                        $('#home-carousel .carousel .panel').hide();
                        $(curCarousel).show();
                        rotatePanels();
                    });
                }, 2000);
            });
        });
    });

    // Setup next carousel for rotation
    var carousels = $('#home-carousel .carousel');
    var i=0;

    for (i=0;i<carousels.length;i++)
    {
        el = carousels.get(i);
        if (el.className == "carousel current")
        {
            // Get next sibling will be marked as current
            if (carousels.get(i + 1) != undefined){
                var tmp = $(carousels).get(i + 1);
                $(tmp).addClass("current");
            }
            else {
                var tmp = carousels.get(0);
                $(tmp).addClass("current");
            }
            $(el).removeClass("current");
            break;
        }
    }
}

/**
 * Display stockists in state
 */
function selectState(el)
{
    var state = document.getElementById($(el).text());
    var $selected = $('#states-nav .selected');
    var selectedState = document.getElementById($selected.text());

    // Get current selected, and remove class and fadeout
    $selected.removeClass("selected");
    $(selectedState).fadeOut("fast", function () {
        $(el).addClass("selected");
        $(state).fadeIn("fast");
    });
    return false;
}

/**
 * Add hover effects to scroller images
 */
function addHoverEffectsToImages()
{
    $('#viewer .panel img').each(function () {
        $(this).hover(
            function () { $(this).stop().fadeTo("fast", 1.00); },
            function () { 
            if (!$(this).hasClass("selected"))   {
                $(this).stop().fadeTo("slow", 0.40);
            }
        });

        $(this).click(function () {
            $('#viewer .panel img.selected').fadeTo("slow", 0.40).removeClass("selected");
            $(this).addClass("selected");

            var styleId = $(this).attr("alt");
            
            $("#style-info").fadeOut("slow");
            $("#style-image").fadeOut("slow", function () {
                // Request data for selected style
                displayStyle(styleId)
            });
        });
    });
}

/* Get data for selected style and display */
function displayStyle(styleId)
{
    $.getJSON("getStyleData.php", { id: styleId }, function(json){
        $("#style-image").attr("src", json.image);
        $("#style-code").html(json.stylecode);
        $("#style-desc").html(json.description);

        $("#style-image").fadeIn("slow");
        $("#style-info").fadeIn("slow");

        $("#data-loading").hide();
        $("#image-loading").hide();
    });
}

/* Get data for selected range and display */
function displayRange(el)
{
    $('#slide-wrapper').html("");
    $('#slide-wrapper').animate({left: 0}, 1);
    $('#panel-loading').show();
    $.get("getRangeData.php", { id: $(el).attr('alt') },
        function(data){
            $('#styles-nav a.selected').removeClass('selected');
            $(el).addClass('selected');
            $('#panel-loading').hide();
            $('#slide-wrapper').html(data);
        }
    );
}

/**
 * Style scrolling panels
 */
var scrollSpeed = 1500;
var viewWidth   = 555;

/* Scroll panel to the left */
function stylesScrollLeft() 
{
    var pos    = $("#slide-wrapper").position();
    var groups = $("#slide-wrapper .panel").length;

    if (groups == 0) {
        return false;
    }

    // Handle multiple clicks, make sure the pos is where it's meant to be before proceeding
    var pgNo = $('#styles-pages .selected').get(0);
    pgNo = pgNo.title;
    var validPos = (pgNo - 1) * viewWidth;
    if (-validPos != pos.left) {
        return false;
    }

    if (pos.left < 0) {
        var left = (pos.left + viewWidth);
        $('#slide-wrapper').animate({left: left}, scrollSpeed);

        // Highlight page number
        var page = (left.toString().substring(1) / viewWidth);
        hightlightPageNo(page);
    }
}

/* Scroll panel to the right */
function stylesScrollRight()
{
    var pos    = $("#slide-wrapper").position();
    var groups = $("#slide-wrapper .panel").length;

    if (groups == 0) {
        return false;
    }

    // Handle multiple clicks, make sure the pos is where it's meant to be before proceeding
    var pgNo = $('#styles-pages .selected').get(0);
    pgNo = pgNo.title;
    var validPos = (pgNo - 1) * viewWidth;
    if (-validPos != pos.left) {
        return false;
    }

    var left   = (pos.left - viewWidth);
    if (left <= -groups * viewWidth) {
        return false;
    }
    
    $('#slide-wrapper').animate({left: left}, scrollSpeed);

    // Highlight page number
    var page = (left.toString().substring(1) / viewWidth);
    hightlightPageNo(page);
}

/* Go to panel screen */
function stylesGoToPage(pg)
{
    page    = $("#slide-wrapper .panel").get((pg - 1));
    var pos = $(page).position();

    $('#slide-wrapper').animate({left: -pos.left}, {duration: scrollSpeed, queue: false});
    hightlightPageNo(pg - 1);
}

/* Highlight selected page number */
function hightlightPageNo(page)
{
    $("#styles-pages a").removeClass("selected");
    page     = $("#styles-pages a").get(page);
    $(page).addClass("selected");
}

/* Load default panels data */
function loadDefaultPanel()
{
    var selectedGroup = $("#styles-nav .selected").get(0);
    if (selectedGroup == undefined) {
        return false;
    }

    // Display range
    displayRange(selectedGroup);
}

/* Validate Form */
function validate()
{
    var name = $("#name").val();
    var email = $("#email").val();
    var subject = $("#subject").val();
    var message = $("#message").val();
    var emailVal = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

    if(name == '' || email == '' || subject == '' || message == ''){

        if(name == ''){
            $("#name").val('* required field');
            $("#name").css({'color' : 'red'});
            $("#name").css({'font-style' : 'italic'});
        }
        if(email == ''){
            $("#email").val('* required field');
            $("#email").css({'color' : 'red'});
            $("#email").css({'font-style' : 'italic'});
        }
        if(subject == ''){
            $("#subject").val('* required field');
            $("#subject").css({'color' : 'red'});
            $("#subject").css({'font-style' : 'italic'});
        }  
        if(message == ''){
            $("#message").val('* required field');
            $("#message").css({'color' : 'red'});
            $("#message").css({'font-style' : 'italic'});
        }  
              
        return false;

    }else {
        
        if(emailVal.test(email) == false) {
            $("#email").val('* invalid email address');
            $("#email").css({'color' : 'red'});
            $("#email").css({'font-style' : 'italic'});
            return false;
        }
        else {
            $("#contact_form").css({'display' : 'none'});
            return true; 
        }
    }
}

function checkField(field){

    if($('#'+field).val() == '* required field'){
        $('#'+field).val('');
        $('#'+field).css({'color' : '#838383'});
    }
    if(field == 'email'){
        $("#email").val('');
        $("#email").css({'color' : '#838383'});
    }
    
}