script.js

jQuery(document).ready(function($){

var rum = "rum";
var produktnamn = "produktnamn";
var optionValue = "";
var html = "";

// arrays to store produkts from the chosen option
var produkter = [];
var sizes = [];
var bilder = [];
var chosen = [];


var mina_rum = [
    {
      name: "3-sits soffa",
      size: 0.2,
      img_url: "http://losningar.se/m3/f29.jpg",
      rum: "vardagsrum",
    },
    {
      name: "2-sits soffa",
      size: 0.1,
      img_url: "http://losningar.se/m3/f28.jpg",
      rum: "vardagsrum",
    },
    {
      name: "TVbänk",
      size: 0.4,
      img_url: "http://losningar.se/m3/f27.jpg",
      rum: "vardagsrum",
    },
    {
      name:"Diningskåp",
      size : 1,
      img_url: "http://losningar.se/m3/f21.jpg",
      rum: "vardagsrum",
    },
    {
      name:"Matbord",
      size: 0,
      img_url: "http://losningar.se/m3/f19.jpg",
      rum: "vardagsrum",
    },
    {
      name:"Endasoffa",
      size: 0.2,
      img_url: "http://losningar.se/m3/f7.jpg",
      rum: "vardagsrum",
    },
    {
      name:"Bokhylla",
      size: 0.5,
      img_url: "http://losningar.se/m3/f5.jpg",
      rum: "vardagsrum",
    },
    {
      name:"Flyttlåda",
      size: 0.1,
      img_url: "http://losningar.se/m3/f2.jpg",
      rum: "vardagsrum",
    },
    {
      name: "Soppåsen",
      size: 0.1,
      img_url: "http://losningar.se/m3/f1.jpg",
      rum: "vardagsrum",
    },
    {
      name: "Kylskåp",
      size: 1,
      img_url: "http://losningar.se/m3/f18.jpg",
      rum: "kok",
    },
    {
      name: "Ugn",
      size: 0.8,
      img_url: "http://losningar.se/m3/f17.jpg",
      rum: "kok",
    },
    {
      name: "Tvättmaskin",
      size: 0.8,
      img_url: "http://losningar.se/m3/f16.jpg",
      rum: "kok",
    },
    {
      name: "Flyttlåda",
      size: 0.2,
      img_url: "http://losningar.se/m3/f2.jpg",
      rum: "kok",
    },
    {
      name: "Soppåsen",
      size: 0.7,
      img_url: "http://losningar.se/m3/f1.jpg",
      rum: "kok",
    },
    {
      name: "Garderob",
      size: 0.1,
      img_url: "http://losningar.se/m3/f26.jpg",
      rum: "sovrum",
    },
    {
      name: "Enkelsäng",
      size: 1,
      img_url: "http://losningar.se/m3/f25.jpg",
      rum: "sovrum",
    },
    {
      name: "Storsäng",
      size: 2,
      img_url: "http://losningar.se/m3/f24.jpg",
      rum: "sovrum",
    },
    {
      name: "Spegel",
      size: 0.1,
      img_url: "http://losningar.se/m3/f23.jpg",
      rum: "sovrum",
    },
    {
      name: "Stol",
      size: 0.25,
      img_url: "http://losningar.se/m3/f22.jpg",
      rum: "matrum",
    },
    {
      name: "Diningskåp",
      size: 1,
      img_url: "http://losningar.se/m3/f21.jpg",
      rum: "matrum",
    },
    {
      name: "Barnstol",
      size: 0.25,
      img_url: "http://losningar.se/m3/f20.jpg",
      rum: "matrum",
    },
    {
      name: "Matbord",
      size: 0.1,
      img_url: "http://losningar.se/m3/f19.jpg",
      rum: "matrum",
    },
    {
      name: "Skänklåda",
      size: 0.4,
      img_url: "http://losningar.se/m3/f4.jpg",
      rum: "matrum",
    },
    {
      name: "Flyttlåda",
      size: 0.1,
      img_url: "http://losningar.se/m3/f2.jpg",
      rum: "matrum",
    },
    {
      name: "Solstol",
      size: 0.1,
      img_url: "http://losningar.se/m3/f15.jpg",
      rum: "kallare",
    },
    {
      name: "Trädgårdsredskap",
      size: 0.3,
      img_url: "http://losningar.se/m3/f9.jpg",
      rum: "kallare",
    },
    {
      name: "Golfset",
      size: 0.2,
      img_url: "http://losningar.se/m3/f13.jpg",
      rum: "kallare",
    },
    {
      name: "Grill",
      size: 0.2,
      img_url: "http://losningar.se/m3/f11.jpg",
      rum: "kallare",
    },
    {
      name: "Cykel2",
      size: 0.1,
      img_url: "http://losningar.se/m3/f12.jpg",
      rum: "kallare",
    },
    {
      name: "Cykel1",
      size: 0.1,
      img_url: "http://losningar.se/m3/f10.jpg",
      rum: "kallare",
    },
    {
      name: "Däck",
      size: 0.1,
      img_url: "http://losningar.se/m3/f8.jpg",
      rum: "kallare",
    },
    {
      name: "Flyttlåda",
      size: 0.1,
      img_url: "http://losningar.se/m3/f2.jpg",
      rum: "kallare",
    },
    {
      name:"Endasoffa",
      size : 0.8,
      img_url: "http://losningar.se/m3/f7.jpg",
      rum: "kontor",
    },
    {
      name:"Skrivbord",
      size : 1.5,
      img_url: "http://losningar.se/m3/f6.jpg",
      rum: "kontor",
    },
    {
      name:"Bokhylla",
      size : 1,
      img_url: "http://losningar.se/m3/f5.jpg",
      rum: "kontor",
    },
    {
      name:"Skänklåda",
      size : 0.4,
      img_url: "http://losningar.se/m3/f4.jpg",
      rum: "kontor",
    },
    {
      name:"Kontorsstol",
      size : 0.25,
      img_url: "http://losningar.se/m3/f3.jpg",
      rum: "kontor",
    },
    {
      name:"Flyttlåda",
      size : 0.8,
      img_url: "http://losningar.se/m3/f2.jpg",
      rum: "kontor",
    },
    {
      name:"Soppåsen",
      size : 0.8,
      img_url: "http://losningar.se/m3/f1.jpg",
      rum: "kontor",
    }
];

// store products in different arrays for sorting types
function storeProducts() {
    //empty the stored values in the arrays
    if (optionValue != 0) {
      produkter = [];
      sizes = [];
      bilder = [];
    };

   /* //loopa igenom min array "mina_rum".
    mina_rum.forEach( function (arrayItem) {*/

    jQuery.each(mina_rum, function(index, item) {
        produktnamn = item.name;
        rum = item.rum;
        m3 = item.size;

        var image = item.img_url;

        // compare optionvalue to object-room-value
        if (rum == optionValue) {
          //console.log(produktnamn + ' ' + rum + ' ' + m3 );

          //Ta produktnamn och lägg till det i en enskild array
          produkter.push(produktnamn);

          //Ta storlekarna på produkterna och lägg till det i en egen array
          sizes.push(m3);

          //Ta bildlänkarna och lägg till det i en egen array
          bilder.push(image);

        };

    });

    // console.log(produkter);
    // console.log(bilder, sizes, produkter);
}

// show product images
function listProductImages(imageList, productNames) {

  var arrayLength = imageList.length;
  for (var i = 0; i < arrayLength; i++) {
      $('.choose').append( '<a href="#" class="produkt" id="' + productNames[i] + '"><img src="' +  imageList[i] + '"/></a>');
  }

  // console.log(imageList);
}



if( $('.ie8').length || $('.ie9').length ) {
  console.log('browser');
  $("select").bind( "click", function(e){
        // Spara attributet för den valda option i en variabel
        optionValue = $('option:selected').val();
        console.log(optionValue + 'för ie');

        // kör funktion för att lagra produkterna i olika arrays
        storeProducts();


        if (optionValue !== 0) {
          $('.choose').empty();
        };

        // skicka med array till listiningsfunktion
        listProductImages(bilder, produkter);
    });

}
else {
    $("select").change( function(e){
      // Spara attributet för den valda option i en variabel
      optionValue = $('option:selected').val();

      // kör funktion för att lagra produkterna i olika arrays
      storeProducts();

      // if first option (välj rum) is chosen
      if (optionValue !== 0) {
        $('.choose').empty();
      };

      // skicka med array till listiningsfunktion
      listProductImages(bilder, produkter);

    });
}

$(document).on('click', 'a.produkt', function(e) {

    e.preventDefault();
    console.log(optionValue);

    // hämta bildsrc
    var imgAttr = $(this).find('img').attr('src');
    console.log(imgAttr);

    // bildsrc jämförs med bildarray och hämtar indexnr
    console.log($.inArray(imgAttr, bilder));

    // sparar indexnr i variabel
    var index = $.inArray(imgAttr, bilder);

    chosen.push($(this).attr('id'));


    console.log(chosen);
    console.log(chosen["Flyttlåda"]);


















    // console.log(index);

    /*permIndex = $.inArray(imgAttr, bilder);*/

    // lägg till i array
    /*chosen.push(produkter[index]);
    console.log(chosen);*/

    // lägger  till namn på produkt i div baserat på index i produktarray
    // var isContains = $('.chosen').text().indexOf(produkter[index]) > -1;

    // Kolla om produkten redan är tillagd annars lägg till den
    // if (isContains == true) {

    //   //console.log(isContains);
    //   jQuery.each(mina_rum, function(index, item) {

    //     if (item.img_url == imgAttr && item.rum == optionValue) {
    //       console.log(item.img_url + ' det här är en dublett');

    //     };

    //   });

    //   console.log(imgAttr);

    // } else {
    //   $('.chosen').append( '<p><span>' + produkter[index]+ '</span><span>' + '</span></p>');
    // };

});

});