Untitled

<html>
    <head>
            <link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" type="text/css" media="all" />
        <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="all" />
        <link rel="stylesheet" href="css/add2home.css">
        <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
</head>

    <body>


  <div id="result-page" data-role="page" data-add-back-btn="true" data-back-btn-text="">
    <header data-role="header">
        <h1>Title</h1>
    </header>
    <div id="contentres" data-role="content">
                  <div class="flexslidercontain">
              <div class="flexslider">
                  <ul class="slides">
                  </ul>
              </div>
              </div>
            </div>
  </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="js/jquery.mobile.config.js"></script>
    <script src="js/jquery.mobile-1.3.2.js"></script>
    <script src="js/flexslider-v2.js"></script> <!-- v2.2 doesn't work, maybe because we're not using last versions of jquery and jqm -->
    <script src="js/boardDims.js"></script>
  </body>
</html>


$(document).on('pageshow','#result-page', function(){

    var suggestionSlider = $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 70,
        //itemMargin: 5, //had to remove this to be able to position:absolute the slider
        pausePlay: false,
        touch: true,
        pauseOnAction: true
    });

    var slider = $('.flexslider').data('flexslider');

    if (numberOfSlidesBefore >= 1) {
        for (var i = numberOfSlidesBefore - 1; i >= 0; i--) { //reverse loop because at each removeSlide() the slider updates the slide numbers...
            slider.removeSlide(i);
        }
    }

    //find other slides
    var matched = $.grep(prodata, function(v,i) {
        return v['name'] === computed.proName && v['id'] !== computed.proId ;
    });
    if ( 0 < matched.length  ) {
        $('#suggestionText').text(computed.proName+"'s other models:");
        addSlidesFromSamePro(matched, slider);
        addSlidesFromSameBrand(slider);
    }else{
        $('#suggestionText').text("Other models from "+computed.proBrand+":");
        addSlidesFromSameBrand(slider);
    }

    var numberOfSlidesNew = $('.flexslider .slides li').length;

    // Check Width of Slider
    var widthOfOneLi = parseInt($('.flexslider .slides li').first().css('width'));
    //hide nav buttons if only few slides
    if ( widthOfOneLi * numberOfSlidesNew <= parseInt($('div.flex-viewport').css('width')) ) {
        $('.flexslider').flexslider("pause");
        $('.flex-prev').css('display','none');
        $('.flex-next').css('display','none');
    }else{
        $('.flexslider').flexslider("play");
        $('.flex-prev').css('display','block');
        $('.flex-next').css('display','block');
    }


    function addSlidesFromSamePro(matched, slider){
        for (i = 0; i < matched.length; ++i) {
                slider.addSlide('<li><a class="suggestPro" proId="'+matched[i]['id']+'" href="#"><span><img src="images/boards/'+matched[i]['imageName']+'" /></span>'
                +'<p class="flex-caption">'+matched[i]['model']+'</p></a></li>'
                );
        }
        $('.flexslider').resize();
    }
    function addSlidesFromSameBrand(slider){
        console.log(computed.proBrand);
        var matchedAgainstBrand = $.grep(prodata, function(v,i) {
            return v['brand'] === computed.proBrand;
        });
        for (i = 0; i < matchedAgainstBrand.length; ++i) {
            if (matchedAgainstBrand[i]['name'] == computed.proName && matchedAgainstBrand[i]['model'] == computed.proModel ) {
            } else {
                slider.addSlide('<li><a class="suggestPro" proId="'+matchedAgainstBrand[i]['id']+'" href="#"><span><img src="images/boards/'+matchedAgainstBrand[i]['imageName']+'" /></span>'
                +'<p class="flex-caption">'+matchedAgainstBrand[i]['model']
                +' - '+matchedAgainstBrand[i]['name'].split(" ")[0]
                +'</p></a></li>'
                );
            }
        }
    }
});