// JavaScript Document

/*Container containing the products or categories in the slider menu*/



function Container() {

this.last = 0;
this.before=0;
this.actual = 0;
this.next = 1;
this.actualCategory = "";
this.content;
this.prodContent;
this.actualProductIndex = 0;

this.initContent = function () {

var xml = setRequest('categories');
var catNb = xml.responseXML.getElementsByTagName('catNb')[0].firstChild.nodeValue;
this.last = catNb-1;
this.content = new Array(catNb);
this.prodContent = new Array(catNb);
var i,j;

for(i=0;i<catNb;i++) {
   this.content[i] = xml.responseXML.getElementsByTagName('category')[i].getAttribute('name');
   //confirm(this.content[i]);
   
   var prodNb = xml.responseXML.getElementsByTagName('prodNb')[i].firstChild.nodeValue;
   this.prodContent[i] = new Array(prodNb);
   //confirm(this.prodContent[i][0]);
	for(j=0;j<prodNb;j++) {
	this.prodContent[i][j] = xml.responseXML.getElementsByTagName('category')[i].getElementsByTagName('product')[j].firstChild.nodeValue;
       //confirm(this.prodContent[i][j]);
	}

 }
}


this.initCategory = function() {

  var category = this.getCategoryName();
  document.getElementById("menu_text").getElementsByTagName('h1')[0].firstChild.nodeValue = category;
  document.getElementById("box_for").setAttribute("src","../Products/CatImages/"+category+"_t.jpg");
 
}

this.createCatMenu = function() {

  var table = document.createElement('table');
  var tbody = document.createElement('tbody');

  var i=0;
  var length = this.content.length; 
 
  var colPerRow = 5;

 while(i<length) {
    
      var j;

      var tr = document.createElement('tr');

      var numberCol = colPerRow;
 
      if(length-i < colPerRow) numberCol = length-i;

      for(j=0;j<numberCol;j++) {

         var index = i + j;    

         tr.appendChild(this.createTd(index));

      }
      tbody.appendChild(tr);
      /*var td1 = document.createElement('td');
      td1.className="categoryMenu";
      var a1 = document.createElement('a');
      a1.href="#";
      a1.id = i;
      a1.onclick = function() {goToCategory(this.id);};
      a1.appendChild(document.createTextNode(this.content[i]));
      td1.appendChild(a1);

      var td2 = document.createElement('td');
      td2.className="categoryMenu";
      var a2 = document.createElement('a');
      a2.href="#";
      a2.id = i+1;
      a2.onclick = function() {goToCategory(this.id);};
      a2.appendChild(document.createTextNode(this.content[i+1]));
      td2.appendChild(a2);

      var td3 = document.createElement('td');
      td3.className="categoryMenu";
      var a3 = document.createElement('a');
      a3.href="#";
      a3.id = i+2;
      a3.onclick = function() {goToCategory(this.id);};
      a3.appendChild(document.createTextNode(this.content[i+2]));
      td3.appendChild(a3);

      var td4 = document.createElement('td');
      td4.className="categoryMenu";
      var a4 = document.createElement('a');
      a4.href="#";
      a4.id = i+3;
      a4.onclick = function() {goToCategory(this.id);};
      a4.appendChild(document.createTextNode(this.content[i+3]));
      td4.appendChild(a4);

      var td5 = document.createElement('td');
      td5.className="categoryMenu";
      var a5 = document.createElement('a');
      a5.href="#";
      a5.id = i+4;
      a5.onclick = function() {goToCategory(this.id);};
      a5.appendChild(document.createTextNode(this.content[i+4]));
      td5.appendChild(a5);

      tr.appendChild(td1);
      tr.appendChild(td2);
      tr.appendChild(td3);   
      tr.appendChild(td4); 
      tr.appendChild(td5);*/

      tbody.appendChild(tr);

      i=i+colPerRow;

  }

   table.appendChild(tbody);
   document.getElementById('slidedown_demo').appendChild(table);
}


this.createTd = function (index) {

      var td = document.createElement('td');
      td.onmouseover=function() {this.className="categoryMenuOver";}
      td.onmouseout=function() {this.className="categoryMenu";}
      td.className="categoryMenu";
      var a = document.createElement('a');
      a.href="#";
      a.style.color="#747577";
      a.id = index;
      a.onclick = function() {goToCategory(this.id);};
      a.appendChild(document.createTextNode(this.content[index]));
      td.appendChild(a);

      return td;
}

this.changeCategory = function(direction,immediateChoice,index) {

  var image;

  if(direction=='right'&&!immediateChoice) {
    image = this.setNext();
  }

  if(direction=='left'&&!immediateChoice) {
    image = this.setLast();
  }

  if(immediateChoice) {

  image = this.setActual(index);

  }

   new Effect.Move('box_inner', {x: 100, y: 0, mode: 'relative',duration: 0.05, queue: { position: 'front', scope: 'menuscope',limit: 2 }}); 

   document.getElementById('box_for').src = image;
   document.getElementById('menu_text').getElementsByTagName('h1')[0].firstChild.nodeValue = container.getCategoryName();
    
   new Effect.Move('box_inner', {x: -100, y: 0, mode: 'relative', duration: 0.5, queue: { position: 'end',scope: 'menuscope',limit: 2 }});
    
    $('box_inner').appear({duration: 0.2,queue: {scope: 'menuscope',limit: 2 }});
    return false;


}

this.setActual = function(index) {

 if(index==this.last) {
  this.actual = index;
  this.next = 0;
  this.before=index-1;
  return this.init();
  }
  this.actual = index;
  this.next = index+1;
  this.before=index-1;
  return this.init();
}

this.setNext = function() {

 if(this.actual==this.last) {
  this.actual = 0;
  this.next = 1;
  this.before=this.last;
  return this.init();
 }

this.before=this.actual;
this.actual++;
return this.init();
}

this.setLast = function() {

 if(this.actual==0) {
  this.actual = this.last;
  this.next = 0;
  this.before = 0;
  return this.init();
 }

this.before=this.actual;
this.actual--;
return this.init();
}

this.init  = function () {

return "../Products/CatImages/"+this.content[this.actual]+"_t.jpg";
}

this.getCategoryName = function() {
return this.content[this.actual];
}

this.createMenu = function(id) {

  deleteMenu(id);
  var index = this.actual; 
  var length = this.prodContent[index].length;
  var tb = document.getElementById(id);
  var tbody = document.createElement('tbody');
  tbody.className = "MenuBody";
  var i;     
     for(i=0;i<length;i++) {
        var tr = document.createElement('tr');
        var td = document.createElement('td'); 
        var td2 = document.createElement('td'); 
        td2.className = "MenuTdLeft";
        td.className = "MenuTdRight"; 

        td2.onmouseover = function() {container.changeTableBackground(this.parentNode,false);};
        td2.onmouseout = function() {container.changeTableBackground(this.parentNode,true);};

        var product = this.prodContent[index][i];

        var img = document.createElement('img');
        img.style.width="100px";
        img.style.height="80px";
        img.src = "../Products/ProductImages/"+product.substr(0,40)+"_t.jpg";
        td2.appendChild(img);
     
        td.onmouseover = function() {container.changeTableBackground(this.parentNode,false);};
        td.onmouseout = function() {container.changeTableBackground(this.parentNode,true);};
        var a = document.createElement('a');
        a.style.color = "#3d3d3b";
        //confirm(product);
        a.id = product;
        a.value = i;
        a.href = "#";
        a.onclick = function () {getRequest(this.id);return false;};
        a.appendChild(document.createTextNode(product));
        td.appendChild(a);  
        tr.appendChild(td2);   
        tr.appendChild(td);

        tbody.appendChild(tr);
     }   

   tb.appendChild(tbody);
   this.productRequest(container.prodContent[index][0]);
   
}

function addImage(element,productName) {

 var product = productName.substr(0,40);

 var img = document.createElement('img');
 img.style.width="100px";
 img.style.height="80px";
 img.src = "../Products/ProductImages/"+product+"_t.jpg";
 element.childNodes.item(0).appendChild(img);

} 

function removeImage(element) {

 element.removeChild(element.lastChild);
} 

this.productRequest = function(link) {

	 deleteMenu('content');
	 var xml = setRequest(link);

	 var tb = document.getElementById('content');
	 var tbody = document.createElement('tbody');
	 var tr = document.createElement('tr');
	 var td = document.createElement('td');
	 td.style.width = "100%";

	 var h1 = document.createElement('h1');
	 var h4 = document.createElement('h4');

	var a = document.createElement('a');
	var name = xml.responseXML.getElementsByTagName('name')[0].firstChild.nodeValue;
	var supplier = xml.responseXML.getElementsByTagName('supplier')[0].firstChild.nodeValue;
	h1.appendChild(document.createTextNode(name));
	a.appendChild(h1);
	a.style.color = "#64645e";
	a.href = "../Products/?link="+link;
        a.target = "_blank";
	h4.appendChild(document.createTextNode(supplier));
	td.appendChild(a);
	td.appendChild(h4);

        var ul = addListing();

        td.appendChild(ul);        

	tr.appendChild(td);
	var td2 = document.createElement('td');
	td2.style.width = "165px";
        td2.style.height = "185px";
	var img = document.createElement('img');
	var src = "../Products/ContentImages/"+xml.responseXML.getElementsByTagName('src')[0].firstChild.nodeValue+".jpg";
	img.className = "Content";
	img.src = "../Products/ContentImages/"+xml.responseXML.getElementsByTagName('src')[0].firstChild.nodeValue+".jpg";
	td2.appendChild(img);
	tr.appendChild(td2);
	tbody.appendChild(tr);
      
        if(xml.responseXML.getElementsByTagName('multipleSeries')[0].firstChild.nodeValue=='true') {

        var trSeries = document.createElement('tr');
        var tdSeries = document.createElement('td');
        tdSeries.colspan = "2";

        var tbSeries = createSeriesAccessories(xml,'series');
 
        tdSeries.appendChild(tbSeries);
        trSeries.appendChild(tdSeries);
        
        tbody.appendChild(trSeries);
        }

       if(xml.responseXML.getElementsByTagName('accessories')[0].firstChild.nodeValue=='true') {

        var trAccessory = document.createElement('tr');
        var tdAccessory = document.createElement('td');
        tdAccessory.colspan = "2";

        var tbAccessory = createSeriesAccessories(xml,'accessories');
 
        tdAccessory.appendChild(tbAccessory);
        trAccessory.appendChild(tdAccessory);
      
        tbody.appendChild(trAccessory);
        }

       var addBasketTr = document.createElement('tr');
       var addBasketTd = document.createElement('td');
       var basketTd = document.createElement('td');
             
       var addBasketLink = document.createElement('a');

       addBasketLink.id = name;   
    
       addBasketLink.href="#";
       addBasketLink.style.border = "none";
       addBasketLink.onclick = function() {basket.addProduct(this.id,name,10);return false;} 

       if(xml.responseXML.getElementsByTagName('accessories')[0].firstChild.nodeValue=='false' && xml.responseXML.getElementsByTagName('multipleSeries')[0].firstChild.nodeValue=='false') {

       var addBasketImage = document.createElement('img');
 
       addBasketImage.style.border = "none";
       addBasketImage.id="addButtonImage";
       addBasketImage.src = "../Images/addBasket.jpg";
       addBasketImage.onmouseover = function() {changeImages(this.id,'../Images/addBasket_over.jpg');};
       addBasketImage.onmouseout = function() {changeImages(this.id,'../Images/addBasket.jpg');};

       addBasketLink.appendChild(addBasketImage);
       addBasketTd.appendChild(addBasketLink);
       addBasketTr.appendChild(addBasketTd); 

      }
  
       var basketImage = document.createElement('img');
       basketImage.id = "basketImage";
       basketImage.style.border = "none";
       basketImage.src = "../Images/Basket.jpg";
       basketImage.onmouseover = function() {changeImages(this.id,'../Images/Basket._over.jpg');};
       basketImage.onmouseout = function() {changeImages(this.id,'../Images/Basket.jpg');}; 

       var basketLink = document.createElement('a');

       basketLink.id = "basketLink";
       basketLink.onclick = function() {new Effect.ScrollTo('basket')};
       basketLink.style.border = "none";
       
 
       
       basketLink.appendChild(basketImage);
       basketTd.appendChild(basketLink);

       addBasketTr.appendChild(basketTd); 

       tbody.appendChild(addBasketTr);     

	tb.appendChild(tbody);

       tb.style.opacity = 0;

       new Effect.Opacity('content', { from: 0, to: 1 ,duration: 4.0});


}

this.refreashRequest = function(link) {


//deleteMenu('content');

var xml = setRequest(link);

var series = xml.responseXML.getElementsByTagName('series');
var accessories = xml.responseXML.getElementsByTagName('accessories');

if(series!=null || accessories!=null) this.productRequest(link);

else {
var tb = document.getElementById('content');

var name = xml.responseXML.getElementsByTagName('name')[0].firstChild.nodeValue;
var supplier = xml.responseXML.getElementsByTagName('supplier')[0].firstChild.nodeValue;
var src = "../Products/ContentImages/"+xml.responseXML.getElementsByTagName('src')[0].firstChild.nodeValue+".jpg";

tb.childNodes.item(0).childNodes.item(0).childNodes.item(1).childNodes.item(0).src = src;// = name;
tb.childNodes.item(0).childNodes.item(0).childNodes.item(0).childNodes.item(0).href = "../Products/?link="+name;
tb.childNodes.item(0).childNodes.item(0).childNodes.item(0).childNodes.item(0).childNodes.item(0).firstChild.nodeValue = name;
tb.childNodes.item(0).childNodes.item(0).childNodes.item(0).childNodes.item(1).firstChild.nodeValue = supplier;
tb.childNodes.item(0).childNodes.item(1).childNodes.item(0).childNodes.item(0).id = name;
//tb.getElementsByTagName('h4').item(0).firstChild.nodeValue = supplier;
//tb.getElementsByTagName('img').item(0).setAttribute("src",src);
//tb.getElementsByTagName('img')[0].setAttribute("class","Content");
new Effect.Opacity('content', { from: 0, to: 1 ,duration: 4.0});
}
}

function deleteMenu(id) {
document.getElementById(id).removeChild(document.getElementById(id).lastChild);
}


this.changeTableBackground = function(element,flag) {

if(flag) {
element.childNodes.item(1).className = "MenuTdRight";
}
 else {
 element.childNodes.item(1).className = "MenuTd";

 }
  
}

function createSeriesAccessories(xml,info) {

 var table = document.createElement('table');

 if(info=='series') {
 
 var seriesQty = xml.responseXML.getElementsByTagName('Qty')[0].firstChild.nodeValue;

 var tbody = document.createElement('tbody');

 var product = xml.responseXML.getElementsByTagName('name')[0].firstChild.nodeValue; 

 var i;

 var tr = document.createElement('tr');
 var td = document.createElement('td');
 td.style.fontSize = "1.2em";
 td.style.fontWeight = "bold"; 
 td.id = "series";

 td.appendChild(document.createTextNode("Serie Products"));
 tr.appendChild(td);
 tbody.appendChild(tr);

 for(i=0;i<parseInt(seriesQty);i++) {

   var name = xml.responseXML.getElementsByTagName('productDescription')[i].firstChild.nodeValue;
   var catNr = xml.responseXML.getElementsByTagName('CatNumber')[i].firstChild.nodeValue;

   var tr = document.createElement('tr');
   var td = document.createElement('td');
   //var tr2 = document.createElement('tr');
   var tdEmpty = document.createElement('td');
   var td2 = addImage(name,product,catNr);

   //tr2.appendChild(td2);   

   td.appendChild(document.createTextNode(name));
   tr.appendChild(td);
   tr.appendChild(tdEmpty);
   tr.appendChild(td2);
   tbody.appendChild(tr);
   //tbody.appendChild(tr2);
 }
 table.appendChild(tbody);
}


 if(info=='accessories') {
 
 var accQty = xml.responseXML.getElementsByTagName('accQty')[0].firstChild.nodeValue;

 var tbody = document.createElement('tbody');

 var product = xml.responseXML.getElementsByTagName('name')[0].firstChild.nodeValue; 

 var tr = document.createElement('tr');
 var td = document.createElement('td');
 td.style.fontSize = "1.2em";
 td.style.fontWeight = "bold"; 
 td.id = "accessories";

 td.appendChild(document.createTextNode("Accessories"));
 tr.appendChild(td);
 tbody.appendChild(tr);

 var i;

 for(i=0;i<parseInt(accQty);i++) {

   var name = xml.responseXML.getElementsByTagName('AccessoryDescription')[i].firstChild.nodeValue;
   var catNr = xml.responseXML.getElementsByTagName('accCatNumber')[i].firstChild.nodeValue;


   var tr = document.createElement('tr');
   var td = document.createElement('td');
   var tdEmpty = document.createElement('td');

   var td2 = addImage(name,product,catNr);

   //tr2.appendChild(td2);   

   td.appendChild(document.createTextNode(name));
   tr.appendChild(td);
   tr.appendChild(tdEmpty);
   tr.appendChild(td2);  
 
   tbody.appendChild(tr);
   //tbody.appendChild(tr2);
 }
 table.appendChild(tbody);


 }
 return table;
}

function addImage(name,product,catNr) {
        
       var addBasketLink = document.createElement('a');
       var td = document.createElement('td');
       addBasketLink.id = name;   
    
       addBasketLink.href="#";
       addBasketLink.style.border = "none";
       addBasketLink.onclick = function() {basket.addProduct(this.id,product,catNr);return false;} 

       var addBasketImage = document.createElement('img');
 
       addBasketImage.style.border = "none";
       addBasketImage.id="addButtonImage";
       addBasketImage.src = "../Images/plus.jpg";

       addBasketLink.appendChild(addBasketImage);
       td.appendChild(addBasketLink);

       return td;

}


 function addListing() {
  
   var ul = document.createElement('ul');
   var liSeries = document.createElement('li');
   var liLink = document.createElement('a');
   
   liLink.href = "#series";
   liLink.appendChild(document.createTextNode("Series"));
   liSeries.appendChild(liLink); 
 
   var liSeries2 = document.createElement('li');
   var liLink2 = document.createElement('a');
   
   liLink2.href = "#accessories";
   liLink2.appendChild(document.createTextNode("Accessories"));
   liSeries2.appendChild(liLink2); 


   var liSeries3 = document.createElement('li');
   var liLink3 = document.createElement('a');
   
   liLink3.href = "#basket";
   liLink3.appendChild(document.createTextNode("Basket Content"));
   liSeries3.appendChild(liLink3); 

   ul.appendChild(liSeries);
   ul.appendChild(liSeries2);
   ul.appendChild(liSeries3);

   return ul;
 }

};