$.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] = [['100GB', 150], ['250GB', 400], ['500GB', 650], ['750GB', 800], ['1000GB', 1200], ['2000GB', 2900]];
calculatorData[2] = [['1GB', 250], ['2GB', 350], ['4GB', 600], ['8GB', 800], ['16GB', 1600], ['32GB', 3200]];
calculatorData[3] = [['100GB', 150], ['200GB', 300], ['400GB', 600], ['600GB', 900], ['800GB', 1200], ['1000GB', 1500]];
calculatorData[4] = [[1, 0], [2, 0], [3, 0], [4, 0], [5, 186], [6, 186], [7, 104], [8, 104], [9, 606], [10, 606], [11, 517], [12, 517], [13, 186], [14, 104], [15, 606], [16, 517]];
calculatorData[5] = [[1, 0], [2, 10], [3, 40], [4, 130], [5, 'N/A']];
calculatorData[6] = [['1U', 400], ['2U', 650], ['4U', 1500], ['8U', 3500]];
calculatorData[7] = [['100GB', 150], ['200GB', 300], ['400GB', 600], ['600GB', 900], ['800GB', 1200], ['1000GB', 1500]];
calculatorData[8] = [[1, 0], [2, 10], [3, 20], [4, 30], [5, 40], [6, 50], [7, 60], [8, 70], [9, 80], [10, 90], [11, 100], [13, 120], [14, 130], [15, 140], [16, 150], [17, 'N/A']];


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) 
                     + facilityServiceFee + getSelectboxCurrentPrice(4) + getSelectboxCurrentPrice(5);
        $('#price').html(result + ',00');
        $('#totalPrice').val(result);
        $('#calcTitle').html('Monthly cost').css({color:'#676767'});
        $('#orderButton').show();
    } 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);
        $('#calcTitle').html('Monthly cost').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(){

    $('#slider1').slider({
        value: getSliderCurrentValue(1),
        range: 'min',
        min: 1,
        max: 6,
        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: 6,
        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: 6,
        step: 1,
        slide: function(event, ui) {
            $('#ammount3').val(calculatorData[3][ui.value-1][0]);
            setTab1Price();
        }
    });
    
    $('#select4').change(function(){
        setTab1Price();
    });
    
    $('#select5').change(function(){
        setTab1Price();
    });
    
    $('#slider6').slider({
        value: getSliderCurrentValue(6),
        range: 'min',
        min: 1,
        max: 4,
        step: 1,
        slide: function(event, ui) {
            $('#ammount6').val(calculatorData[6][ui.value-1][0]);
            setTab2Price();
        }
    });
    
    $('#slider7').slider({
        value: getSliderCurrentValue(7),
        range: 'min',
        min: 1,
        max: 6,
        step: 1,
        slide: function(event, ui) {
            $('#ammount7').val(calculatorData[7][ui.value-1][0]);
            setTab2Price();
        }
    });
    
    $('#select8').change(function(){
        setTab2Price();
    });
    
    //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();
    $('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)
	}
	
}