// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults

//


$(document).ready(function() {


    // make the menu klap
    $('ul.level2,ul.level3,ul.level4').each(function() {

        $(this).parent('li').css('cursor', 'pointer');

        $(this).parent('li').click(function (e) {
            if (e.target == this) {
                $('ul.level2:first', this).toggle();
            }
        })

    });


    // input type has class required label get's a *
    $('form.style :input').filter('.required').siblings('label').addClass('required');

    $('form.style fieldset').each(function() {
        $("li:gt(0)", this).addClass('border-top')
    });

    var elements = $("textarea, select, multi-select, :text, :image, :password, :radio, :checkbox, :file");

    //elements.after('<p class="note" style="border:1px solid red">Hier de error</p>');

    elements.bind
            (
                    'focus',
            function() {
                $(this).parents('li').addClass('highlight');
            }
                    );

    elements.bind
            (
                    'blur',
            function() {
                $(this).parents('li').removeClass('highlight');
                ;
            }
                    );


    jQuery.validator.messages.required = 'Dit veld is verplicht.'
    jQuery.validator.messages.email = 'Voer een geldig emailadres in.'


    // validate all forms that hava a class of validate
    $('form.validate').each(function() {


        $("#" + this.id).validate({

            errorElement:'p',
            debug: true,
            submitHandler:function(form) {
                form.submit();
            }});

    });


});


function stock_image(stock){

    var color = 'red';
    var title = 'Niet op voorraad';
    var hint = 'Neem contact op over levertijd..'


    if (stock > 4 )
    {
        color = 'green';
        title = 'Op voorraad';
        hint = ''
    }
    if (stock > 0 && stock < 5)
    {
        color = 'orange';
        title = 'Bepert voorradig';
        hint = ''
        
    }

    return "<img style='float:left' src='/images/stock/" + color + ".png' title='" + title + "' alt='" + title + "'> " + title + "<br>" + hint 

}

function select_size(caller, id) {
    var value = $(caller).val();

    //console.log("update price for id = " + id + " value =" + value);
    var tprice = $("#price_" + id);
    var tstock = $("#stock_" + id);


    //console.log(product_size_stocks)
    //$('#price_<%= @product.id %>').html('&euro;' +  product_<%= @product.id %>_prices[$('#product_size_id').val()]);$('');$('#price_<%= @product.id %>').effect('pulsate', { times:3 }, 2000);

    // update the price of the product
    //if (product_size_prices[value]) {
      //  console.log('pas product prijs aan naar: ' + product_size_prices[value]);
        $('#price_val').html('&euro;' + product_size_prices[value]).effect('pulsate', { times:2 }, 1000);

    //}
    // update the stoch
    //if (product_size_stocks[value]) {
        //console.log('voorraad = ' + product_size_stocks[value]);
        //console.log('pas product stock aan');
        $('#stock_val').html(stock_image(product_size_stocks[value])).effect('pulsate', { times:2 }, 1000);
    //}

}

function select_color(caller, id) {
    var value = $(caller).val();

    //console.log("update color for id = " + id + " value =" + value);
    var tprice = $("#price_" + id);
    var tstock = $("#stock_" + id);

    // update the image of the product
    //if (product_color_images[value]) {
       // console.log('pas product image aan');
        $('#product_image').attr('src', product_color_images[$('#product_color_id').val()]).effect('pulsate', { times:2 }, 1000);
    //}
    // update the stoch
    //if (product_color_stocks[value]) {
      //  console.log('pas product stock aan');
      //  console.log('voorraad = ' + product_color_stocks[value]);
        $('#stock_val').html(stock_image(product_color_stocks[value]));
        $('#product_image').attr('src', product_color_images[$('#product_color_id').val()]).effect('pulsate', { times:2 }, 1000);
    //}


    //if (product_color_images[$('#product_color_id').val()]) { ) }

}