// Array.prototype.inArray       je iz AjaxBrandProducts.js
// Array.prototype.removeElement je iz AjaxBrandProducts.js

var phoneNameBgColor       = '#F9F7DB'; // '#F9F6D1';
var hlPhoneNameBgColor     = '#BFBFFF';
var productPickerMode      = 'list'; // 'graphical'
var selectedProductIDArray = new Array();

function onBrandChange(_this)
{
   // lista proizvoda - messageAjaxWait poruka i "brisanje" postojece product preview slike
   if ( productPickerType == 'list' || (productPickerType == 'both' && productPickerMode == 'list') )
   {
   	selectedIndex = document.getElementById('product').selectedIndex;

		document.getElementById('product').disabled = true;

		if ( selectedIndex != -1 )
			document.getElementById('product').options[selectedIndex].text = messageAjaxWait;
      else
      {
		   option = new Option();
		   option.value = '';
		   option.text  = messageAjaxWait;

			productSelect = document.getElementById('product');
		   productSelect[0] = option;
		}

   
      if ( productWasSelected == true )
         document.getElementById('productImage').innerHTML = '<div id="previewImage" style="width: 70px; height: 93px; margin: 0 0 0 20px; border: 1px solid #777" />';
	}

   // graficki prikaz proizvoda - messageAjaxWait poruka
   if ( productPickerType == 'graphical' || (productPickerType == 'both' && productPickerMode == 'graphical') )
   {
		graphicContainerObject = document.getElementById('graphicContainer');
	  	graphicContainerObject.innerHTML = '<div class="messageAjaxWait">' + messageAjaxWait + '</div>' + 
		                                   '<img src="/AjaxWait.gif" width="16" height="16" class="ajaxWait" />';
	}

	onSelectChange(_this);
	xmlHttp.getProductInformationFromServer(_this.value); // poziva display
}


function display(brandCharacteristicID)
{
	if ( productPickerType == 'list' )
      populateProductList(brandCharacteristicID);
	else if ( productPickerType == 'graphical' )
     populateGraphicContainer();
	else if ( productPickerType == 'both' )
	{
      populateProductList(brandCharacteristicID);
      populateGraphicContainer();
   }

	return ;
}


function setStyle(element, style)
{
   if ( element.style.setAttribute == null )
      element.setAttribute('style', style);
   else // IE
   	element.style.setAttribute('cssText', style, 0);
}


function populateProductList(brandCharacteristicID)
{
  	productSelect = document.getElementById('product');

   // brisanje elemenata
	for ( i = productSelect.options.length - 1;  i >= 0;  i-- )
		productSelect.removeChild(productSelect.options[i]);

   // prazni element
	option = new Option();
	option.value = 'empty';
	option.text  = '';

	productSelect[0] = option;

   // dodavanje elemenata
   j = 1;
	for ( i = 0;  i < brandProducts[brandCharacteristicID].length;  i++ )
	{
      if ( usedProducts.inArray(brandProducts[brandCharacteristicID][i].id) == false )
      {
		   option = new Option();
		   option.value = brandProducts[brandCharacteristicID][i].id;
		   option.text  = brandProducts[brandCharacteristicID][i].name;

		   productSelect[j++] = option;
		}
  }

   // enable combo boxa
  document.getElementById('product').disabled = false;
}


function populateGraphicContainer()
{
   imageOuterBorderColor = '#EAEAEA';

   brandChooserObject     = document.getElementById('brand');
   graphicContainerObject = document.getElementById('graphicContainer');

   brandCharacteristicID = brandChooserObject.options[brandChooserObject.selectedIndex].value;


   if ( brandCharacteristicID != 'empty' )
   {
      graphicContainerObject.innerHTML = '';

      if ( brandProducts[brandCharacteristicID] != null ) // postoje podaci
		{
         j = 0;

         // koriste se funkcionalnosti iz AjaxBrandProducts.js
      	for ( i = 0;  i < brandProducts[brandCharacteristicID].length;  i++ )
   		{
   			if ( usedProducts.inArray(brandProducts[brandCharacteristicID][i].id) == false ) // ako nije vec u usporedbi
            {
   			   productID = brandProducts[brandCharacteristicID][i].id;

			      name      = brandProducts[brandCharacteristicID][i].name;
			      shortName = brandProducts[brandCharacteristicID][i].shortName;
			      if ( brandProducts[brandCharacteristicID][i].imageUrl != null )
      			   imageUrl = staticImageDirectory + brandProducts[brandCharacteristicID][i].imageUrl;
               else
                  imageUrl = null;

               mainDivElement = document.createElement('div');
               aElement       = document.createElement('a');
               aElement.style.cursor = 'hand';

               setStyle(mainDivElement, 'height: 134px; float: left'); // podesavanje visine i float propertyja

               // IE
               if ( aElement.style.setAttribute != null )
               {
                  aElement.setAttribute('href', productID);

                  aElement.onclick = function()
                  {
                     toggleProductSelection(this);
                     return false;
                  }

                  isIE = true;
               }
               else
               {
                  aElement.setAttribute('href', '#');
                  aElement.setAttribute('onclick', 'toggleProductSelection(' +  productID + '); return false;');

                  isIE = false;
               }

               containerDivElement   = document.createElement('div');

               if ( j % numOfProductsInRow == 0 ) // svaki n-ti, tj. svaki prvi u retku
                  setStyle(containerDivElement, 'position: relative; margin-left: 4px; clear: both; text-align: center; background-color: ' + imageOuterBorderColor + '; padding-top: 3px');
               else
                  setStyle(containerDivElement, 'position: relative; margin-left: 10px; clear: both; text-align: center; background-color: ' + imageOuterBorderColor + '; padding-top: 3px');

               // za oznacavanje proizvoda
               highlightElement = document.createElement('div');
               if ( isIE )
                  leftOffset = '-3px';
               else
                  leftOffset = '5px';

               highlightElement.setAttribute('id', 'highlightElement' + productID);

					if ( selectedProductIDArray.inArray(productID) ) // ako se nalazi u polju - vec je prethodno oznacen
						displayType = 'block';
					else
						displayType = 'none';

               setStyle(highlightElement, 'width: 70px; height: 93px; background-color: blue; position: absolute; top: 4px; left: ' + leftOffset + '; ' +
                                          'display: ' + displayType + '; -moz-opacity: 0.25; filter: alpha(opacity=25); opacity: 0.25');
               
               // slika
               if ( imageUrl != null )
               {
                  imgElement = document.createElement('img');

                  imgElement.setAttribute('src',    imageUrl);
                  imgElement.setAttribute('width',  70);
                  imgElement.setAttribute('height', 93);
                  imgElement.setAttribute('title',  name);
                  imgElement.setAttribute('alt',    name);
               }
               else
               {
                  imgElement = document.createElement('div');
                  
                  setStyle(imgElement, 'width: 70px; height: 93px; background-color: #FFF; border: solid 1px #CCC; margin: 0 auto 0 auto');
               }

               // spacer (a ne border, jer "zadrzava svojstvo linka" u IE)
               spacerDivElement = document.createElement('div');
               setStyle(spacerDivElement, 'font-size: 0px; width: 72px; height: 6px');

               // ime mobitela
               textDivElement = document.createElement('div');
               textDivElement.innerHTML = shortName;
			      textDivElement.setAttribute('id', 'phoneName' + productID);

               // boja i border za (ne)oznacene proizvode
					if ( selectedProductIDArray.inArray(productID) )
					{
						backgroundColor = hlPhoneNameBgColor;
						borderColor     = '#222';
					}
					else
					{
						backgroundColor = phoneNameBgColor;
						borderColor     = '#888';
					}

               setStyle(textDivElement, 'min-height: 14px; background-color: ' + backgroundColor + '; font: normal 11px Tahoma; width: 80px; ' +
                                        'text-align: center; border-bottom: solid 1px ' + borderColor + '; border-top: solid 1px ' + borderColor);

               mainDivElement.appendChild(aElement);
               aElement.appendChild(containerDivElement);


               containerDivElement.appendChild(highlightElement);
               containerDivElement.appendChild(imgElement);
               containerDivElement.appendChild(spacerDivElement);
               containerDivElement.appendChild(textDivElement);

               graphicContainerObject.appendChild(mainDivElement);

               j++;
				}
         }
		}
		else // nedostaju podaci
		{
		   graphicContainerObject.innerHTML = '<div style="font: normal 11px Tahoma; margin: 112px 0 0 160px">' + messageAjaxWait + '</div>';
         return ;
      }
   }
   else // == 'empty'
   {
      graphicContainerObject.innerHTML = '<div class="messageAjaxChoosePhoneBrand">' + messageAjaxChoosePhoneBrand + '</div>';
      return ;
   }
}


function toggleProductSelection(productID)
{
	highlightElement = document.getElementById('highlightElement' + productID);
	phoneNameElement = document.getElementById('phoneName' + productID);

	if ( selectedProductIDArray.inArray(productID) === false ) // element ne postoji u polju - dodavanje
	{
		selectedProductIDArray[selectedProductIDArray.length] = productID;
	   setStyle(highlightElement, 'width: 70px; height: 93px; background-color: blue; position: absolute; top: 4px; left: ' + leftOffset + '; ' +
                                 'display: block; -moz-opacity: 0.25; filter: alpha(opacity=25); opacity: 0.25');
		setStyle(phoneNameElement, 'min-height: 14px; background-color: ' + hlPhoneNameBgColor + '; font: normal 11px Tahoma; width: 80px; ' +
                                 'text-align: center; border-bottom: solid 1px #222; border-top: solid 1px #222');
      document.getElementById('graphCompareButton').disabled = false;
      // document.getElementById('product').display = 'block';
      fadeIn('clickHereManual');
   }
   else // element postoji u polju - uklanjanje
   {
		selectedProductIDArray.removeElement(productID);
	   setStyle(highlightElement, 'display: none');
	   setStyle(phoneNameElement, 'min-height: 14px; background-color: ' + phoneNameBgColor + '; font: normal 11px Tahoma; width: 80px; ' +
                                 'text-align: center; border-bottom: solid 1px #888; border-top: solid 1px #888');

      if ( selectedProductIDArray.length == 0 )
         document.getElementById('graphCompareButton').disabled = true;
	}

	return false;
}


function toggleProductPicker(_this)
{
   graphicContainerObject     = document.getElementById('graphicContainer');
   productChooserObject       = document.getElementById('product');
   productStringObject        = document.getElementById('productString');
   compareButtonObject        = document.getElementById('compareButton');
   graphCompareButtonObject   = document.getElementById('graphCompareButton');
   previewImageObject         = document.getElementById('previewImage');
   clickHereManualObject      = document.getElementById('clickHereManual');
   dummyIEContainerObject     = document.getElementById('dummyIEContainer');
   productListContainerObject = document.getElementById('productListContainer');

   if ( productPickerMode == 'list' ) // prebacuje se na graficki nacin
   {
      _this.innerHTML = messageAjaxChoosePhoneFromList;
      productPickerMode = 'graphical';
      graphicContainerObject.style.display = 'block';

      productChooserObject.style.display     = 'none';
      productStringObject.style.display      = 'none';
      compareButtonObject.style.display      = 'none';
      graphCompareButtonObject.style.display = 'block';
      if ( previewImageObject != null )
         previewImageObject.style.display = 'none';

      populateGraphicContainer();
      // if ( selectedProductIDArray.length > 0 || graphCompareButtonObject.style.setAttribute != null ) // ili ako je IE
         // clickHereManualObject.style.display = 'block';

		// IE6 display bugfix        
		productChooserObject.parentNode.removeChild(productChooserObject); 
		dummyIEContainerObject.appendChild(productChooserObject);
   }
   else // productPicker == 'graphical'
   {
		// IE6 display bugfix
		productChooserObject.parentNode.removeChild(productChooserObject); 
		productListContainerObject.appendChild(productChooserObject);

      _this.innerHTML = messageAjaxChoosePhoneGraphically;
      productPickerMode = 'list';
      graphicContainerObject.style.display = 'none';

      productChooserObject.style.display     = 'block';
      productStringObject.style.display      = 'block';
      compareButtonObject.style.display      = 'block';
      graphCompareButtonObject.style.display = 'none';
      if ( previewImageObject != null )
         previewImageObject.style.display = 'block';

      // clickHereManualObject.style.display = 'none';
   }
}