$.fn.fancyInput = function() {
    $(this)
       .wrap('<div class="fancyInputOuterContainer" />')
       .wrap('<div class="fancyInputInnerContainer" />');
}

$.fn.fancyCheckbox = function() {
    $(this)
       .wrap('<div class="fancyCheckboxContainer" />')
       .css({opacity: 0})
       .change(function() {
            if($(this).is(':checked')) {
                $(this).parent().addClass('checked');
            } else {
                $(this).parent().removeClass('checked');
            }
        });
    if($(this).is(':checked')) {
        $(this).parent().addClass('checked');
    } else {
        $(this).parent().removeClass('checked');
    }
}

$.fn.fancySelectbox = function() {
    this.each(function(){
        var self = $(this);
        var width = self.outerWidth();
        var height = self.outerHeight();
        self.css({'position': 'absolute', 'padding': 0, 'right': 5, 'bottom': 0, 'opacity': 0})
            .wrap('<div class="fancySelectboxWrapper" />').parent().width(width).height(18).css({'position': 'relative', 'padding-left': 10})
            .wrapInner('<div class="fancySelectboxContainer" />').find('.fancySelectboxContainer').height(18)
            .append('<input type="text" />').find('input').width(width-30).css({'padding': 0});
        //handling change...
        self.change(function() {
            self.parent().find('input').val($(':selected', self).text());
        }).mouseenter(function(){
            self.parent().parent().addClass('hover');
        }).mouseleave(function() {
            self.parent().parent().removeClass('hover');
        });
        self.parent().find('input').val($(':selected', self).text());
    })
}

//var slider1Data = ;
var calculatorData = Array(8);
calculatorData[1] = [['10GB', 290], ['15GB', 390], ['30GB', 530], ['70GB', 650], ['100GB', 790], ['150GB', 1000], ['200GB', 1250], ['300GB', 1500], ['400GB', 2000], ['500GB', 2500]];
calculatorData[2] = [['0', 0], ['1', 14], ['2', 28], ['3', 42], ['4', 56], ['5', 70], ['6', 84], ['7', 98], ['8', 112], ['9', 126], ['10', 140]];
calculatorData[3] = [['0', 0], ['1', 10], ['5', 50], ['10', 100], ['20', 200], ['30', 300], ['50', 500], ['100', 1000]];
calculatorData[4] = [['0', 0], ['1', 7], ['5', 35], ['10', 70], ['20', 140], ['30', 210], ['50', 350], ['100', 700]];


var facilityServiceFee = 440;
    
    //slider 1...
    var sliderPrice4 = 650;
    var sliderPrice5 = 300;
    var select1Price = 0;
    var select2Price = 0;
    var select3Price = 0;
    var totalPrice = 0;

function getSliderCurrentValue(sliderId) {
    var result = 2;
    var title = $('#ammount'+sliderId).val();
    for (i in calculatorData[sliderId]) {
        if (calculatorData[sliderId][i][0] == title) {
            result = i*1 + 1;
            break;
        }
    }
    return result;
}

function getSliderCurrentPrice(sliderId) {
    var result = calculatorData[sliderId][2][1];
    var title = $('#ammount'+sliderId).val();
    for (i in calculatorData[sliderId]) {
        if (calculatorData[sliderId][i][0] == title) {
            result = calculatorData[sliderId][i][1] * 1;
            break;
        }
    }
    return result;
}

function getSelectboxCurrentPrice(sliderId) {
    var result = 0;
    var title = $('#select'+sliderId).val();
    for (i in calculatorData[sliderId]) {
        if (calculatorData[sliderId][i][0] == title) {
            result = calculatorData[sliderId][i][1];
            break;
        }
    }
    return result;
}

function setTab1Price() {
    if (getSelectboxCurrentPrice(5) != 'N/A') {
        var result = getSliderCurrentPrice(1) + getSliderCurrentPrice(2) + getSliderCurrentPrice(3) + getSliderCurrentPrice(4);
        $('#price').html(result + ',00');
        $('#totalPrice').val(result);
        $('#calcTitle').html('Månedlig kostnad').css({color:'#676767'});
		$('.item_price').html(result);
        $('#orderButton').show();
		showOrder();
    } else {
        $('#price').html('N/A');
        $('#calcTitle').html('More info needed, contact us.').css({color:'#E1172C'});
        $('#orderButton').hide();
    }
}

function setTab2Price() {
    if (getSelectboxCurrentPrice(8) != 'N/A') {
        var result = getSliderCurrentPrice(6) + getSliderCurrentPrice(7)
                     + facilityServiceFee + getSelectboxCurrentPrice(8);
        $('#price').html(result + ',00');
        $('#totalPrice').val(result);
		$('.item_price').html(result);
        $('#calcTitle').html('Månedlig kostnad').css({color:'#676767'});
        $('#orderButton').show();
    } else {
        $('#price').html('N/A');
        $('#calcTitle').html('More info needed, contact us.').css({color:'#E1172C'});
        $('#orderButton').hide();
    }
}

function showCurrentTab()
{
    switch($('#tabId').val()) {
        case '1':
                $('#calculator1').show();
                $('#calculator2').hide();
                $('#calculatorTabsMenu a').removeClass('selected');
                $('#calculatorTab1').addClass('selected');
                $('#tabId').val(1);
                setTab1Price();
            break;
        case '2':
                $('#calculator1').hide();
                $('#calculator2').show();
                $('#calculator2').css({'position':'static', 'visibility':'visible'});
                $('#calculatorTabsMenu a').removeClass('selected');
                $('#calculatorTab2').addClass('selected');
                $('#tabId').val(2);
                setTab2Price();
            break;
    }
}

function  showOrder(){
	var size = $('#ammount1').val();
	var obm = $('#ammount2').val();
	var acb = $('#ammount3').val();
	var eml = $('#ammount4').val();
	
 	 $('.item_name').html('SOB [' +size+ ', ' +obm + ' OBM, ' +acb + 'ACB, ' +eml + 'EML]');
	 }


$(function(){

    $('#slider1').slider({
        value: getSliderCurrentValue(1),
        range: 'min',
        min: 1,
        max: 10,
        step: 1,
        slide: function(event, ui) {
            $('#ammount1').val(calculatorData[1][ui.value-1][0]);
            setTab1Price();
        }
    });
    
    $('#slider2').slider({
        value: getSliderCurrentValue(2),
        range: 'min',
        min: 1,
        max: 10,
        step: 1,
        slide: function(event, ui) {
            $('#ammount2').val(calculatorData[2][ui.value-1][0]);
            setTab1Price();
        }
    });
    
    $('#slider3').slider({
        value: getSliderCurrentValue(3),
        range: 'min',
        min: 1,
        max: 7,
        step: 1,
        slide: function(event, ui) {
            $('#ammount3').val(calculatorData[3][ui.value-1][0]);
            setTab1Price();
        }
    });
    
    $('#slider4').slider({
        value: getSliderCurrentValue(4),
        range: 'min',
        min: 1,
        max: 7,
        step: 1,
        slide: function(event, ui) {
            $('#ammount4').val(calculatorData[4][ui.value-1][0]);
            setTab1Price();
        }
    });
    
    //hover states on the static widgets
    $('#dialog_link, ul#icons li').hover(
        function() { $(this).addClass('ui-state-hover'); }, 
        function() { $(this).removeClass('ui-state-hover'); }
    );
    
    //tabs...
    $('#calculatorTab1').click(function(){
        $('#tabId').val(1);
        showCurrentTab();
    });
    
    $('#calculatorTab2').click(function(){
        $('#tabId').val(2);
        showCurrentTab();
    });
    
    $('.text.fancy').fancyInput();
    $('.checkbox.fancy').fancyCheckbox();
    $('.checkbox.fancy2').fancyCheckbox();
    $('input').attr('autocomplete', 'off');
    $('select.fancy').fancySelectbox();
    
    $('#orderArrow').click(function() {
        document.location = 'form.php';
    });
    
    showCurrentTab();
});

function ChangeOrder(){
	
	if ($('#change1').attr('checked') || $('#change2').attr('checked')) {
		var i=0;
		while (i <= 7){
   				$('#slider' + i).css({'visibility':'visible'})
				i++
   		    }
		$('#select4').attr('disabled', '')
		$('#select5').attr('disabled', '')
		$('#select8').attr('disabled', '')
	}else{
	var i=0;
		while (i <= 7){
   				$('#slider' + i).css({'visibility':'hidden'})
				i++
   		    }
		$('#select4').attr('disabled', true)
		$('#select5').attr('disabled', true)
		$('#select8').attr('disabled', true)
	}
	
}