/*

 RangeHighlights Render Tests

 */



describe("RangeHighlights Render Tests", function() {

    var testSlider1;

    var testSlider2;

    var testSlider3;

    var testSlider4;



    //setup

    beforeEach(function() {

        var rangeHighlightsOpts1 = [

            { "start": 2, "end": 5, "class": "category1" },    // left: 10%; width: 15%

            { "start": 7, "end": 8, "class": "category2" },    // left: 35%; width: 5%

            { "start": 17, "end": 19 },  // left: 85%; width: 10%

            { "start": 17, "end": 24 },  //out of range - not visible

            { "start": -3, "end": 19 }   //out of range - not visible

        ];



        var rangeHighlightsOpts2 = [

            { "start": 2, "end": 5, "class": "category1" },   // top: 10%; height: 15%

            { "start": 7, "end": 8, "class": "category2" },   // top: 35%; height: 5%

            { "start": 17, "end": 19 }, // top: 85%; height: 10%

            { "start": 7, "end": -4 },  //out of range - not visible

            { "start": 23, "end": 15 }  //out of range - not visible

        ];

        

        testSlider1 = $('#testSlider1').slider({

            id: 'slider1',

            min: 0,

            max: 20,

            step: 1,

            value: 14,

            rangeHighlights: rangeHighlightsOpts1

        });



        testSlider2 = $('#testSlider2').slider({

            id: 'slider2',

            min: 0,

            max: 20,

            step: 1,

            value: 14,

            orientation: 'vertical',

            rangeHighlights: rangeHighlightsOpts2

        });



        testSlider3 = $('#testSlider3').slider({

            id: 'slider3',

            min: 0,

            max: 20,

            step: 1,

            value: 14,

            reversed: true,

            rangeHighlights: rangeHighlightsOpts1

        });



        testSlider4 = $('#testSlider4').slider({

            id: 'slider4',

            min: 0,

            max: 20,

            step: 1,

            value: 14,

            reversed: true,

            orientation: 'vertical',

            rangeHighlights: rangeHighlightsOpts2

        });

    });



    //cleanup

    afterEach(function() {

        testSlider1.slider('destroy');

        testSlider1 = null;



        testSlider2.slider('destroy');

        testSlider2 = null;



        testSlider3.slider('destroy');

        testSlider3 = null;



        testSlider4.slider('destroy');

        testSlider4 = null;

    });



    //test the visibility of ranges e.g. : { "start": 23, "end": 15 } - out of range - not visible

    function testHighlightedElements(sliderId, isHorizontal, expections) {



        //check elements exist

        it("Highlighted ranges are rendered - " + sliderId, function() {

            expect($(sliderId).length).toBe(1);

            expect($(sliderId + ' .slider-rangeHighlight').length).toBe(5);

            expect($(sliderId + ' .slider-rangeHighlight.category1').length).toBe(1);

            expect($(sliderId + ' .slider-rangeHighlight.category2').length).toBe(1);

        });



        //check elements exist within proper display value

        it("Highlighted ranges render inside the slider's bounds " + sliderId, function() {

            expect($(sliderId).length).toBe(1);



            var ranges = $(sliderId + ' .slider-rangeHighlight');

            expect(ranges.length).toBe(5);



            for (var i = 0; i < ranges.length; i++) {

                expect($(ranges[i]).is(":visible")).toBe(expections[i].isVisible);

                if (expections[i].isVisible) {

                    if(isHorizontal) {

                        expect(_getLeftPercent($(ranges[i]))).toBe(expections[i].start);

                        expect(_getWidthPercent($(ranges[i]))).toBe(expections[i].size);

                    } else {

                        expect(_getTopPercent($(ranges[i]))).toBe(expections[i].start);

                        expect(_getHeightPercent($(ranges[i]))).toBe(expections[i].size);

                    }

                }

            }

        });



    }



    function _getLeftPercent(element) {

        return Math.round(100 * element.position().left / element.parent().width()) + '%';

    }



    function _getWidthPercent(element) {

        var width = element.width();

        var parentWidth = element.offsetParent().width();

        return Math.round(100 * width / parentWidth) + '%';

    }



    function _getTopPercent(element) {

        return Math.round(100 * element.position().top / element.parent().height()) + '%';

    }



    function _getHeightPercent(element) {

        var height = element.height();

        var parentHeight = element.offsetParent().height();

        return Math.round(100 * height / parentHeight) + '%';

    }



    //test both testSlider

    testHighlightedElements('#slider1', true, [{

        isVisible: true,

        start: '10%',

        size: '15%'

    }, {

        isVisible: true,

        start: '35%',

        size: '5%'

    }, {

        isVisible: true,

        start: '85%',

        size: '10%'

    }, {

        isVisible: false,

        start: '85%',

        size: '10%'

    }, {

        isVisible: false,

        start: '85%',

        size: '10%'

    }]);

    testHighlightedElements('#slider2', false, [{

        isVisible: true,

        start: '10%',

        size: '15%'

    }, {

        isVisible: true,

        start: '35%',

        size: '5%'

    }, {

        isVisible: true,

        start: '85%',

        size: '10%'

    }, {

        isVisible: false,

        start: '85%',

        size: '10%'

    }, {

        isVisible: false,

        start: '85%',

        size: '10%'

    }]);

    testHighlightedElements('#slider3', true, [{

        isVisible: true,

        start: '75%',

        size: '15%'

    }, {

        isVisible: true,

        start: '60%',

        size: '5%'

    }, {

        isVisible: true,

        start: '5%',

        size: '10%'

    }, {

        isVisible: false,

        start: '5%',

        size: '10%'

    }, {

        isVisible: false,

        start: '5%',

        size: '10%'

    }]);

    testHighlightedElements('#slider4', false, [{

        isVisible: true,

        start: '75%',

        size: '15%'

    }, {

        isVisible: true,

        start: '60%',

        size: '5%'

    }, {

        isVisible: true,

        start: '5%',

        size: '10%'

    }, {

        isVisible: false,

        start: '5%',

        size: '10%'

    }, {

        isVisible: false,

        start: '5%',

        size: '10%'

    }]);

});

