$(document).ready(function () {

    

    $("#myChk").attr('checked', false);

    function formatItem(row) {
        return row[0]; // +" (<strong>id: " + row[1] + "</strong>)";
    }

    var searchURL = $(location).attr('href') + "ElhandlarSearch/";
    $("#provider-search").autocomplete(searchURL, {
        width: 200,
        mustMatch: false,
        matchContains: false,
        minLength: 4,
        scroll: false,
        delay: 0,
        formatItem: formatItem
    }).result(function (event, data, formatted) {
        location.href = data[1];
    });


    $(".fancyYoutube").fancybox({
        'transitionIn': 'elastic',
        'padding': 0,
        'autoScale': false,
        'transitionOut': 'fade',
        'width': 680,
        'height': 495,
        'type': 'swf'
    });

    $("html").removeClass("no-js").addClass("js");

    $("#application form").formwizard({
        validationEnabled: true,
        validationOptions: {

            rules: {
                postnr: {
                    postnr_validator: true,
                    required: true
                },
                forbrukning: {
                    required: true
                }
            },
            messages: {
                "postnr": {
                    required: "Du måste fylla i ditt postnummer",
                    postnr_validator: "Postkoden måste vara 5 siffror"
                },
                "forbrukning": "Du måste fylla i hur mycket du gör av med (siffror)",
                "avtalstyp": "Du måste välja avtalsform",
                "select_payment_type": "Du måste välja sätt att betala"
            }
        },
        formOptions: {
            dataType: 'json',
            resetForm: true
        },
        disableUIStyles: true,
        textNext: 'Nästa',
        textBack: 'Tillbaka',
        textSubmit: 'Visa avtal'
    });

    // Hantering vid redigering av dropdown val
    $('#consumption').focus(function () {
        $('#select_living_type option').first().attr('selected', 'selected');
        $('#target_select_living_type dt a').html('Välj förbrukning');
    });
    $('#target_select_living_type.dropdown li').first().css('display', 'none');

    // Validera postkoden
    $.validator.addMethod("postnr_validator", function (postalcode, element) {
        return this.optional(element) || postalcode.match(/(^\d{3}\s*\d{2}$)/);
    }, "Postkoden maste vara 5 siffror");

    $("#search_form").submit(function () {
        $("input[name^='select_']").remove();
    });

    $('#consumption').change(function () {
        $('#select_living_type option').attr('selected', false);
    });


    $("input[name=avtalstyp]").change(function () {
        var test = $(this).val();
        $("#mixed").hide();
        $("#fixed").hide();
        $("#mobile").hide();
        $("#" + test).show();
        $("#length_selection").show();
    });


    //	$("#postal-code").rules("add", {
    //		maxlength: 5
    //		minlength: 5
    //		required: true;
    //	});


    // Create custom dropdowns
    createDropDown('select_consumption', 'white', 'start');
    createDropDown('select_living_type', 'white', '', 'consumption');
    createDropDown('select_company', 'white', 'small');
    createDropDown('select_length', 'blue', 'start', 'avtalslangd');
    createDropDown('select_length_1', 'blue', 'start', 'avtalslangd');
    createDropDown('select_length_2', 'blue', 'start', 'avtalslangd');
    createDropDown('select_length_3', 'blue', 'start', 'avtalslangd');
    createDropDown('select_payment_type', 'blue', 'start', 'fakturatyp');

    $('#search_form input[type=checkbox],#search_form input[type=radio]').prettyCheckboxes({ 'display': 'inline' });

    $('#show_my_electricity input[type=radio]').prettyCheckboxes({ 'display': 'inline' });
    $('#show_my_net_fee_form input[type=radio]').prettyCheckboxes({ 'display': 'inline' });


    // Result table
    $('#result-table.search-results tbody').click(function () {
        location.href = $(this).find('tr td a').attr('href');
    });

    $('#result-table.company tbody').click(function () {
        location.href = $(this).find('tr td a.url').attr('href');
    });

    $('#result-table tbody').hover(function () {
        $(this).toggleClass('highlight');
    });

    $('.result-box tr').click(function () {
        location.href = $(this).find('td a').attr('href');
    });

    $('.result-box tr').hover(function () {
        $(this).toggleClass('highlight');
    });

    $(".paging li:even").addClass("even");
    $(".paging li:odd").addClass("odd");


});


/**
 * createDropDown
 * 
 * Generates a custom style dropdown from a regular HTML select 
 * and setting class depending on color
 * 
 * You can send in a custom js function that will trigger when selecting a value.
 * it will take the value from the select and send it as a parameter to the function 
 * with the name you specify here if the function exists
 * 
 * See var update_target_consumption = function(search){}
 * 
 * @param string id
 * @param string classes
 * @param string custom_js_function
 *
 *****/
function createDropDown(id, color, classes, upid){
    var source = $("#"+id);
	var target_id = "target_"+id;
	
    var selected = source.find('option[selected="selected"]');  // get selected <option>
	
    var options = $("option[class!='default']", source);  // get all <option> elements

    // create <dl> and <dt> with selected value inside it
    source.parent().append('<div class="'+color+'"><dl id="'+target_id+'" class="dropdown '+classes+'"></dl></div>');

    $("#"+target_id).append('<dt><a href="javascript:void(0);">' + selected.text() + 
        '<span class="value">' + selected.val() + 
        '</span></a></dt>');

    $("#"+target_id).append('<dd><ul></ul></dd>');

    // iterate through all the <option> elements and create UL
    options.each(function(){
        $("#"+target_id+" dd ul").append('<li><a href="javascript:void(0);">' + 
            $(this).text() + '<span class="value">' + 
            $(this).val() + '</span></a></li>');
    });
	
	 $("#"+target_id+" dd ul").append('<li class="bottom">&nbsp;</li>');
	
	source.hide();
	
	$("#"+target_id+".dropdown dd ul li a").click(function() {
	    var text = $(this).html();
	    $("#"+target_id+".dropdown dt a").html(text);
	    $("#"+target_id+".dropdown dd ul").hide();
		$("#"+target_id+".dropdown dt a").toggleClass('active');
	    source.val($(this).find("span.value").html());
		// Update the value of a given id
	    if (upid) $('#' + upid).val($(this).find("span.value").html());
	});
	
	$("#"+target_id+".dropdown dt a").click(function() {
		$("#"+target_id+".dropdown dt a").toggleClass('active');
		$("#"+target_id+".dropdown dd ul").toggle();
	});



}



/* ------------------------------------------------------------------------
	prettyCheckboxes
	
	Developped By: Stephane Caron (http://www.no-margin-for-errors.com)
	Inspired By: All the non user friendly custom checkboxes solutions ;)
	Version: 1.1
	
	Copyright: Feel free to redistribute the script/modify it, as
			   long as you leave my infos at the top.
------------------------------------------------------------------------- */
	
	jQuery.fn.prettyCheckboxes = function(settings) {
		settings = jQuery.extend({
					checkboxWidth: 20,
					checkboxHeight: 20,
					className : 'prettyCheckbox',
					display: 'list'
				}, settings);

		$(this).each(function(){
			// Find the label
			var $label = $('label[for="'+$(this).attr('id')+'"]');
			
			// Add the checkbox holder to the label
			$label.prepend("<span class='holderWrap'><span class='holder'></span></span>");

			// If the checkbox is checked, display it as checked
			if($(this).is(':checked')) { 
				$label.addClass('checked'); 
			}

			// Assign the class on the label
			$label.addClass(settings.className).addClass($(this).attr('type')).addClass(settings.display);

			// Assign the dimensions to the checkbox display
			$label.find('span.holderWrap').width(settings.checkboxWidth).height(settings.checkboxHeight);
			$label.find('span.holder').width(settings.checkboxWidth);

			// Hide the checkbox
			$(this).addClass('hiddenCheckbox');

			// Associate the click event
			$label.bind('mousedown',function(){
				$('input#' + $(this).attr('for')).triggerHandler('click');
				
				if($('input#' + $(this).attr('for')).is(':checkbox')){
					$(this).toggleClass('checked');
					$('input#' + $(this).attr('for')).checked = true;
					
					$(this).find('span.holder').css('top',0);
				}else{
					var $toCheck = $('input#' + $(this).attr('for'));

					// Uncheck all radio
					$('input[name="'+$toCheck.attr('name')+'"]').each(function(){
						$('label[for="' + $(this).attr('id')+'"]').removeClass('checked');	
					});
					
					$(this).addClass('checked');
					$toCheck.checked = true;
				}
			});
			
			$('input#' + $label.attr('for')).bind('keypress',function(e){
				if(e.keyCode == 32){
					if($.browser.msie){
						$('label[for="'+$(this).attr('id')+'"]').toggleClass("checked");
					}else{
						$(this).trigger('click');
					}
					return false;
				}
			});
			
		});
	};
	
	checkAllPrettyCheckboxes = function(caller, container){
		if($(caller).is(':checked')){
			// Find the label corresponding to each checkbox and click it
			$(container).find('input[type=checkbox]:not(:checked)').each(function(){
				//$('label[for="'+$(this).attr('id')+'"]').trigger('click');
				if($.browser.msie){
					$(this).attr('checked','checked');
				}else{
					//$(this).trigger('click');
				}
			});
		}else{
			$(container).find('input[type=checkbox]:checked').each(function(){
				//$('label[for="'+$(this).attr('id')+'"]').trigger('click');
				if($.browser.msie){
					$(this).attr('checked','');
				}else{
					//$(this).trigger('click');
				}
			});
		}
	};