//======= General Variables =====
var dataHolder;
var chosenObjects;
var ElementsCount;
var openedList;
var isExist;
var MaxElements;
var Types;
//===============================

setTimeout('Init()', 500);

function Init() {

    dataHolder = new dataHolder(); 
    
    Types = { 
        Manufactors:{
            ID: 0, Text: 'Manufactors'
        },
        Models:{
            ID: 1, Text: 'Models'
        },
        Versions:{
            ID: 2, Text: 'Versions'
        }
    };
    
    chosenObjects = new Array();
    chosenObjects[Types.Manufactors.ID] = new Array();
    chosenObjects[Types.Models.ID] = new Array();
    chosenObjects[Types.Versions.ID] = new Array();
    ElementsCount = 0;
    isExist = false;
    MaxElements = 4;
    
    setData();
    showStrips();    
}

function addCar(e) {
    HandleInsert(ElementsCount);
}

function deleteCar(e) {  
    var obj = GetSourceElement(e);    
    var carID = Number(obj.parentNode.id);
    
    if(carID == null){        
        return;
    }
    
    HandleDelete(carID);    
}

function updateCar(e) { 
    var obj = GetSourceElement(e);    
    var carID = obj.parentNode.id;
    
    if(carID == null)
        return;
    
    HandleUpdate(carID);
}

function GetSourceElement(e){
    if(e == null) e = window.event;    
    return (typeof e.target != 'undefined') ? e.target : e.srcElement;
}

function hideList(e){    
    if ( openedList == null)
        return;
        
    if(isExist) {        
        alert('הרכב כבר קיים');
        isExist = false;
        return;
    }
    openedList.style.display = 'none';
    openedList = null;    
    RemoveEvent(document, "click" , hideList, true);
}

function getElements(Type, row, noevent) {    
    var content;    
    
    content = getContent(Type, row);       
    
    $(Type.Text+row+'List').innerHTML = content;
    $(Type.Text+row+'List').style.display = 'block';
    
    hideList(); //Ensures only one open ListBox    
    openedList = $(Type.Text+row+'List');
    
    AddEvent(document, "click" , hideList, true);
}

function getContent(Type, row) {
    if(Type == Types.Manufactors){
        return createList(dataHolder.getManufactorsOutput(), Type, row);
    }
    else if(Type == Types.Models){        
        if(chosenObjects[Types.Manufactors.ID][row] == undefined){
            return 'עליך לבחור קודם יצרן';
        }        
        return createList(dataHolder.getModelsOutput(chosenObjects[Types.Manufactors.ID][row].ID), Type, row);
    }
    else if(Type == Types.Versions){
        
        if(chosenObjects[Types.Manufactors.ID][row] == undefined){
            return 'עליך לבחור יצרן';
        }
        else if(chosenObjects[Types.Models.ID][row] == undefined){
            return 'עליך לבחור דגם';
        }
        return createVersionsList(dataHolder.getVersionsOutput(chosenObjects[Types.Manufactors.ID][row].ID, chosenObjects[Types.Models.ID][row].ID), Type, row);
    }
}

function createList(Arr, Type, row) {
    
    var elmID;
    var elmText;
    var content = '';    
    if(Arr == null){
        return "...טוען";
    }
    content = '<table width="100%" cellpadding="0" cellspacing="0" dir="rtl">';    
    for (var i=0; i < Arr.length; i++){
    
        elmID = Arr[i][0];        
        elmText = validateText(Arr[i][1]);
	    content += '<tr><td align="right">';
	    content += '<div class="ajaxRow" onclick="setSelection('+ row +','+ elmID +', Types.'+Type.Text+', \''+ elmText +'\')" onmouseout=\'this.className="ajaxRow"\' onmouseover=\'this.className="ajaxRowOver"\' style="width:100%;">&nbsp;'+ elmText +'</div>';
	    content += '</td></tr>';
    }
    content += '</table>';
    return content;
}

function createVersionsList(Arr, Type, row) {
    var elmID;
    var elmText;
    var elmPrice;
    var content = '';    
    if(Arr== null)
    {
        return "...טוען";
    }
    content = '<table width="100%" cellpadding="0" cellspacing="0" dir="rtl">';
    for (var i=0; i < Arr.length; i++){
        elmID = Arr[i][0];        
        elmText = validateText(Arr[i][1]);
        elmPrice = Arr[i][2];
	    content += '<tr><td align="right">';
	    content += '<div class="ajaxRow" onclick="setSelection('+ row +', '+ elmID +', Types.'+Type.Text+', \''+ elmText +'\')" onmouseout=\'this.className="ajaxRow"\' onmouseover=\'this.className="ajaxRowOver"\' style="width:100%;">&nbsp;'+ elmText +'</div>';
	    content += '</td></tr>';
    }
    content += '</table>';
    return content;
}

function setSelection(row, ID, Type, Text) {    
    if (Type == Types.Versions && validateExist(row, ID)){
        return; 
    }
    
    if(row < ElementsCount){ //Update
        if(chosenObjects[Type.ID][row]!=null && chosenObjects[Type.ID][row].ID!=ID)
        {
            resetRowElements(row,Type);
            $('actionBtn'+row).src = $('actionBtn'+row).src.replace('Delete', 'Update');
            $('actionBtn'+row).onclick = updateCar;
            //RemoveEvent($('actionBtn'+row), "click" , deleteCar, false);
            //AddEvent($('actionBtn'+row), "click" , updateCar, false);            
        }
        //return;
    }        
    
    chosenObjects[Type.ID][row] = new Object();    
    chosenObjects[Type.ID][row].ID =  ID;
    
    $(Type.Text+row+'Text').value = Text;    
}

function resetRowElements(row, Type) {
    if(Type == Types.Manufactors) {
        $(Types.Models.Text+row+'Text').value = "בחר את דגם הרכב...";
        $(Types.Versions.Text+row+'Text').value = "בחר את גירסאת הרכב...";
        chosenObjects[Types.Models.ID][row] = null;
        chosenObjects[Types.Versions.ID][row] = null;
    }
    else{
        $(Types.Versions.Text+row+'Text').value = "בחר את גירסאת הרכב...";
        chosenObjects[Types.Versions.ID][row] = null;
    }
}

function setData(){
    var carsArr;
    var carDetails, carManufactor, carModel, carVersion;
    var data = readCookie('otoliCompare');
    
    if(data == null){
        return;
    }
    
    carsArr = data.split(',');    
    for (var i=0; i < carsArr.length; i++){
        carDetails = carsArr[i].split('>');   
        if (carDetails.length != 3){
            continue;
        }
        
        carManufactor = carDetails[0].split(':');
        carModel = carDetails[1].split(':');
        carVersion = carDetails[2].split(':');        
        if(carManufactor.length != 2 || carModel.length != 2 || carVersion.length !=2){
            continue;
        }
                
        carManufactor[0] = carManufactor[0].substr(5,carManufactor[0].length);
        
        //Manufactor
        chosenObjects[Types.Manufactors.ID][i] = new Object();
        chosenObjects[Types.Manufactors.ID][i].ID =  carManufactor[0];
        //Model
        chosenObjects[Types.Models.ID][i] = new Object();        
        chosenObjects[Types.Models.ID][i].ID =  carModel[0];        
        //Version
        chosenObjects[Types.Versions.ID][i] = new Object();        
        chosenObjects[Types.Versions.ID][i].ID =  carVersion[0];
        ElementsCount++;
    }
}

function HandleInsert(carID) {           
    if(!validate(carID)){
        return;
    }
    
    setCookie(carID);
    $('actionBtn'+carID).src =  $('actionBtn'+carID).src.replace('Add', 'Delete');    
    $('actionBtn'+carID).parentNode.id = carID;    
    $('actionBtn'+carID).onclick = deleteCar;
    
    ElementsCount++;
    
    showStrips(chosenObjects[2][carID].ID);
    
    if(ElementsCount == MaxElements){
        return;
    }
    
    createNewRow(carID);       
}

function HandleDelete(carID) {

    var RowElement, newTR, newTD; 
    var i, newID;   
    
    deleteFromCookie(carID);
    $('StripCell'+carID).parentNode.removeChild($('StripCell'+carID));    
    $('row'+carID).parentNode.removeChild($('row'+carID));   
    $('StripsTopRow').removeChild($('StripDelBtn'+carID));
    $('StripsTopRow').removeChild($('StripDelTxt'+carID));        
                
    i = carID+1;
    while(i < ElementsCount){        
        newID = i-1;                
        
        updateRowControls(i);
        updateStripControls(i);       
        
        chosenObjects[Types.Manufactors.ID][newID] = chosenObjects[Types.Manufactors.ID][i];
        chosenObjects[Types.Models.ID][newID]      = chosenObjects[Types.Models.ID][i];
        chosenObjects[Types.Versions.ID][newID]    = chosenObjects[Types.Versions.ID][i];        
                
        i++;
    }
    
    if(ElementsCount < MaxElements){
        //update the last Row            
        updateRowControls(ElementsCount);    
        ElementsCount--;
        
        //The following code copy the data of the new row that is about be add
        nextElement = ElementsCount + 1;
        chosenObjects[Types.Manufactors.ID][ElementsCount] = chosenObjects[Types.Manufactors.ID][nextElement];
        chosenObjects[Types.Models.ID][ElementsCount]      = chosenObjects[Types.Models.ID][nextElement];
        chosenObjects[Types.Versions.ID][ElementsCount]    = chosenObjects[Types.Versions.ID][nextElement];
    }
    else{        
        ElementsCount--;
        createNewRow(ElementsCount-1);
    }
    
}

function HandleUpdate(carID) {      
    if(!validate(carID)){
        return;
    }
            
    updateCookie(carID);
     
    $('actionBtn'+carID).src = $('actionBtn'+carID).src.replace('Update','Delete');
    $('actionBtn'+carID).onclick = deleteCar;
        
    //replace the strip    
    replaceStrip(chosenObjects[2][carID].ID, carID);
}

function updateRowControls(id) {
    var newID = id - 1;
    
    $('maBtn'+id).id = 'maBtn'+newID;
    $('maBtn'+newID).onclick = function() { getElements(Types.Manufactors, newID); };        
    $(Types.Manufactors.Text+id+'Text').id = Types.Manufactors.Text+newID+'Text';
    $(Types.Manufactors.Text+id+'List').id = Types.Manufactors.Text+newID+'List';
    $('moBtn'+id).id = 'moBtn'+newID;
    $('moBtn'+newID).onclick = function() { getElements(Types.Models, newID); };        
    $(Types.Models.Text+id+'Text').id = Types.Models.Text+newID+'Text';
    $(Types.Models.Text+id+'List').id = Types.Models.Text+newID+'List';
    $('verBtn'+id).id = 'verBtn'+newID;
    $('verBtn'+newID).onclick = function() { getElements(Types.Versions, newID); };        
    $(Types.Versions.Text+id+'Text').id = Types.Versions.Text+newID+'Text';
    $(Types.Versions.Text+id+'List').id = Types.Versions.Text+newID+'List';
    
    $('row'+id).id = 'row'+newID;
    $('actionBtn'+id).id = 'actionBtn'+newID;
    $('actionBtn'+newID).parentNode.id = newID;
}
function updateStripControls(id){
    var newID = id - 1;
    
    $('StripCell'+id).id = 'StripCell'+newID;
    $('StripDelBtn'+id).id = 'StripDelBtn'+newID;
    $('StripDelTxt'+id).id = 'StripDelTxt'+newID;
    $('DelBtn'+id).id = 'DelBtn'+newID;
    $('DelBtn'+newID).parentNode.id = newID;
    $('DelTxt'+id).id = 'DelTxt'+newID;
    $('DelTxt'+newID).parentNode.id = newID;    
}

function replaceStrip(stripToLoad, elementToReplace){
    
    if(stripToLoad == null || elementToReplace == null){
        return;
    }
    
    var Object = $('StripCell'+elementToReplace);
    
    dataHolder.loadDataToObj('strip', stripToLoad, Object);
}

function showStrips(stripsToLoad, Action){
    var comma = ''
    var func;    
    
    if(stripsToLoad == null){
        stripsToLoad = '';
        for (var i=0; i< chosenObjects[Types.Versions.ID].length; i++){
            stripsToLoad += comma + chosenObjects[Types.Versions.ID][i].ID;
            comma = ',';            
        }        
    }
    
    if(stripsToLoad == ''){
        return;
    }    
    
    func = createStrip;
    
    dataHolder.loadData('strip', stripsToLoad, func);
}

function createStrip(responseText) {
    var arr = new Array();
    var TR, newTD;
    var idx; 
    
    if(responseText.lastIndexOf('<div') > 0) { //more then one strip was loaded happens on Init
        idx = 0;
        arr = responseText.split('<div');    
        for(var i=1; i<arr.length; i++){
            //Insert the new strip after the current row    
            TR = $('techStrips'); 
            newTD = document.createElement('td');
            newTD.id = 'StripCell' + idx;
            newTD.className = 'CompareStrip';
            TR.appendChild(newTD);
            newTD.innerHTML = '<div' + arr[i];
            
            //Strip Top Remove Button
            createStripTopRemoveButton(idx);
                
            idx++;
        }
    }
    else {
        idx = ElementsCount-1;
        //Insert the new strip after the current row    
        TR = $('techStrips'); 
        newTD = document.createElement('td');
        newTD.id = 'StripCell' + idx;
        newTD.className = 'CompareStrip';        
        TR.appendChild(newTD);
        newTD.innerHTML = responseText;    
        
        createStripTopRemoveButton(idx);
    }
}

function validate(row){
    if (chosenObjects[Types.Manufactors.ID][row] == null){
        alert('אנא בחר את יצרן הרכב');
        return false;
    }
    else if(chosenObjects[Types.Models.ID][row] == null){
        alert('אנא בחר את דגם הרכב');
        return false;
    }
    else if(chosenObjects[Types.Versions.ID][row] == null){
        alert('אנא בחר את גירסאת הרכב');
        return false;
    }
    return true;
}

function validateExist(row, ID) {
    var found = false;
    
    for(var i=0; i<ElementsCount; i++)
    {
        if(chosenObjects[Types.Versions.ID][i] == null || chosenObjects[Types.Versions.ID][i].ID != ID)
            continue;
        
        found = true;
        isExist = true;        
        break;
    }
    
    return found;
}

function createStripTopRemoveButton(stripId) {
    //Strip Top Remove Button
    TR = $('StripsTopRow')
    newTD = TR.appendChild( document.createElement('td') );
    newTD.id = 'StripDelBtn'+stripId;
    newTD.className = 'CompareStripTopBtn';
    newTD.innerHTML = '<span id='+stripId+'><img id="DelBtn'+stripId+'" src="images/compare/stripDeleteBtn.gif" style="cursor:pointer;"/></span>'
    newTD = TR.appendChild( document.createElement('td') );
    newTD.id = 'StripDelTxt'+stripId;
    newTD.className = 'CompareStripTopTxt';
    newTD.innerHTML = '<span id='+stripId+'><a id="DelTxt'+ stripId +'" class="CompareStripTopTxt" style="color:White; font-weight:bold; cursor:pointer;">&nbsp;&nbsp;הסר עמודת רכב</a></span>'
    
    $('DelBtn'+stripId).onclick = deleteCar;
    $('DelTxt'+stripId).onclick = deleteCar;
    //AddEvent($('DelBtn'+stripId), "click" , deleteCar, false);
    //AddEvent($('DelTxt'+stripId), "click" , deleteCar, false);
}

function createNewRow(currentRowId){
    var newRowStr;
    var TR, newTR, newTD;
    var newRowID = currentRowId + 1 
    
    var carManufactorText = "בחירת יצרן הרכב...";
    var carModelText = "בחירת דגם הרכב...";
    var carVersionText = "בחירת גירסאת הרכב...";
       
    newRowStr = '<table cellpadding="0" cellSpacing="0">';
    newRowStr += '<tr>';
    newRowStr += '<td class="CompareMenuTitle" style="padding-right:12px; width:28px;">יצרן</td>';
    newRowStr += '<td class="CompareMenuTitle" style="width:184px;">';
    newRowStr += '<table cellpadding="0" cellspacing="0" style="border:solid 1px #646464; height:20px;">';
    newRowStr += '<tr>';
    newRowStr += '<td id="maBtn'+ newRowID +'" style="cursor:pointer;" onclick="getElements(Types.Manufactors, '+ newRowID +');"><img src="images/compare/arrow.gif" alt="" /></td>';
    newRowStr += '<td style="background:#FFFFFF;"><input id="Manufactors' + newRowID + 'Text" readonly="readonly" type="Text" class="CompareMenuSelect" value="'+ carManufactorText +'" /></td>';
    newRowStr += '</tr>';
    newRowStr += '</table>';
    newRowStr += '<div class="ajaxList" style="width:148px; overflow-y:scroll; overflow-x:hidden;" id="Manufactors'+ newRowID +'List"></div>';
    newRowStr += '</td>';
    newRowStr += '<td class="CompareMenuTitle" style="width:31px;">דגם</td>';
    newRowStr += '<td class="CompareMenuTitle" style="width:184px;">';
    newRowStr += '<table cellpadding="0" cellspacing="0" style="border:solid 1px #646464; height:20px;">';
    newRowStr += '<tr>';
    newRowStr += '<td id="moBtn'+ newRowID +'" style="cursor:pointer;" onclick="getElements(Types.Models, ' + newRowID + ');"><img src="images/compare/arrow.gif" alt="" /></td>';
    newRowStr += '<td style="background:#FFFFFF;"><input id="Models' + newRowID + 'Text" readonly="readonly" type="Text" class="CompareMenuSelect" value="'+ carModelText +'" /></td>';
    newRowStr += '</tr>';
    newRowStr += '</table>';
    newRowStr += '<div class="ajaxList" style="width:148px; overflow-y:scroll; overflow-x:hidden;" id="Models'+ newRowID +'List"></div>';
    newRowStr += '</td>';
    newRowStr += '<td class="CompareMenuTitle" style="width:40px;">גירסא</td>';
    newRowStr += '<td class="CompareMenuTitle" style="width:185px;">';
    newRowStr += '<table cellpadding="0" cellspacing="0" style="border:solid 1px #646464; height:20px;">';
    newRowStr += '<tr>';
    newRowStr += '<td id="verBtn'+ newRowID +'" style="cursor:pointer;" onclick="getElements(Types.Versions, '+ newRowID +');"><img src="images/compare/arrow.gif" alt="" /></td>';
    newRowStr += '<td style="background:#FFFFFF;"><input id="Versions'+ newRowID +'Text" readonly="readonly" type="Text" class="CompareMenuSelect" style="width:150px;" value="'+ carVersionText +'" /></td>';
    newRowStr += '</tr>';
    newRowStr += '</table>';
    newRowStr += '<div class="ajaxList" style="width:172px; overflow-y:scroll; overflow-x:hidden;" id="Versions'+ newRowID +'List"></div>';
    newRowStr += '</td>';
    newRowStr += '<td><img src="images/compare/menuRound.gif" /></td>';
    newRowStr += '<td id="'+ newRowID +'"><img id="actionBtn'+ newRowID +'" src="images/compare/menuAddBtn.gif" style="cursor:pointer;" /></td>';
    newRowStr += '</tr>';
    newRowStr += '<tr>';
    newRowStr += '<td colspan="8" style="height:5px;"></td>';
    newRowStr += '</tr>';   
    newRowStr += '</table>';  
        
    
    TR = $("row"+currentRowId);
    newTR = document.createElement("tr");
    newTR.id = "row"+newRowID;
    TR.parentNode.insertBefore(newTR,TR.nextSibling);  //cause insertBefore() to behave like insertAfter 
    newTD = newTR.appendChild( document.createElement("td") );
    newTD.innerHTML = newRowStr;    
    
    $("actionBtn"+newRowID).onclick = addCar;
    //AddEvent($("actionBtn"+newRowID), "click" , addCar, false);
}

function displayMenu() {
    if ($('compareMenu').style.display == 'block'){
        $('compareMenu').style.display = 'none';
        $('displayMenu').innerHTML = 'הצג תפריט';
    }
    else{
        $('compareMenu').style.display = 'block';
        $('displayMenu').innerHTML = 'הסתר תפריט';
    }
}

function setCookie(row) {

    var name = 'otoliCompare';
    var subName = 'car';
    var value = '';
    
    if (row > 0)
    {
        value = readCookie();
    }
    
	value += subName + row + '=';
	value += chosenObjects[Types.Manufactors.ID][row].ID + ':' + $(Types.Manufactors.Text+row+'Text').value + '>';
	value += chosenObjects[Types.Models.ID][row].ID + ':' + $(Types.Models.Text+row+'Text').value + '>';
	value += chosenObjects[Types.Versions.ID][row].ID + ':' + $(Types.Versions.Text+row+'Text').value + ',';
	
	createCookie(name,value,0);	
}

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = '; expires='+date.toGMTString();
	}
	else {
	    var expires = '';
	}
	
	document.cookie = name + '=' + escape(value) + expires + '; path=/';
}

function readCookie() {
    var name = 'otoliCompare';
	var nameEQ = name + '=';
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		
		while (c.charAt(0)==' ') {
		     c = c.substring(1,c.length);
		}
		if (c.indexOf(nameEQ) == 0) {
		    return unescape(c.substring(nameEQ.length,c.length));
		}
	}
	return null;
}

function updateCookie(carID) {
	var name = 'otoliCompare';
	var subName = 'car';
    var content = new String();
    var newStr, tmpstr;
    var idx, nextIdx, i;
    
    carID = Number(carID);
    
    newStr = subName + carID + '=';
	newStr += chosenObjects[Types.Manufactors.ID][carID].ID + ':' + $(Types.Manufactors.Text+carID+'Text').value + '>';
	newStr += chosenObjects[Types.Models.ID][carID].ID + ':' + $(Types.Models.Text+carID+'Text').value + '>';
	newStr += chosenObjects[Types.Versions.ID][carID].ID + ':' + $(Types.Versions.Text+carID+'Text').value + ',';
	
	content = readCookie();
    idx = content.indexOf(subName + carID);
    if (idx < 0){
        return;
    }
    
    nextIdx = content.indexOf(subName + (carID + 1));
	if (nextIdx < 0){
	    nextIdx = content.length;
	}
	
	tmpstr = content.substring(idx,nextIdx);
	content = content.replace(tmpstr, newStr);
	
	createCookie(name, content, 0);
}

function deleteFromCookie(carID) {
    var subName = 'car';
    var content;
    var idx, nextIdx, i;
    
    content = readCookie('otoliCompare');    
    idx = content.indexOf(subName+carID);

    if (idx < 0){
        return;
    }
    
    nextIdx = content.indexOf(subName+(carID+1));
    if (nextIdx >= 0){     //if has next
        if (idx == 0){     //first
            content = content.substr(nextIdx,content.length);
        }
        else{              //middle
            var tempStr;
            tempStr = content.substr(idx, nextIdx-idx);
            content = content.replace(tempStr,'');
        }
    }
    
    else{                  //last or there was only 1 car
        if (idx == 0){     //first
            content = ''
        }
        else{              //last
            content = content.substr(0,idx);
        }
    }
    
    i = carID+1;
    while(content.indexOf(subName+i) > -1) {
        content = content.replace(subName+i,subName+(i-1));
        i++;
    }

    createCookie('otoliCompare',content,0);
}

function validateText(str) {
    str = str.replace("'","&#180;");
    return str;
}

function AddEvent(e,eT,eL,cap)
{  
  eT=eT.toLowerCase();
  if(e.addEventListener)e.addEventListener(eT,eL,cap||false);
  else if(e.attachEvent){        
    event.cancelBubble = true;
    e.attachEvent('on'+eT,eL);
  }
  else {
    var o=e['on'+eT];
    e['on'+eT]=typeof o=='function' ? function(v){o(v);eL(v);} : eL;
  }
}

function RemoveEvent(e,eT,eL,cap)
{
  eT=eT.toLowerCase();
  if(e.removeEventListener)e.removeEventListener(eT,eL,cap||false);
  else if(e.dettachEvent){        
    event.cancelBubble = true;
    e.dettachEvent('on'+eT,eL);
  }
  else {
    var o=e['on'+eT];
    o = null;
  }
}