// global variables //

// calculate the current window width //
function pageWidth() {
  return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
}

// calculate the current window height //
function pageHeight() {
  return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
}

// calculate the current window vertical offset //
function topPosition() {
  return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
}

// calculate the position starting at the left of the window //
function leftPosition() {
  return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
}

// build/show the dialog box, populate the data and call the fadeDialog function //
function showDialog(szRowNumber) {
  var dialog;
  var dialogheader;
  var dialogclose;
  var dialogtitle;
  var dialogcontent;
  var dialogmask;
  
  // create the dialog divs //
  if(!document.getElementById('dialog')) {
    dialog = document.createElement('div');
    dialog.id = 'dialog';
    dialogheader = document.createElement('div');
    dialogheader.id = 'dialog-header';
    dialogtitle = document.createElement('div');
    dialogtitle.id = 'dialog-title';
    dialogclose = document.createElement('div');
    dialogclose.id = 'dialog-close'
    dialogcontent = document.createElement('div');
    dialogcontent.id = 'dialog-content';
    dialogmask = document.createElement('div');
    dialogmask.id = 'dialog-mask';
	
	//add the elements to the body //
    document.body.appendChild(dialogmask);
    document.body.appendChild(dialog);
    dialog.appendChild(dialogheader);
    dialogheader.appendChild(dialogtitle);
    dialogheader.appendChild(dialogclose);
    dialog.appendChild(dialogcontent);
	
	// create the onClick of the button //
    dialogclose.setAttribute('onclick','hideDialog()');
    dialogclose.onclick = hideDialog;
	
  } else {
	// get the dialog divs //
    dialog = document.getElementById('dialog');
    dialogheader = document.getElementById('dialog-header');
    dialogtitle = document.getElementById('dialog-title');
    dialogclose = document.getElementById('dialog-close');
    dialogcontent = document.getElementById('dialog-content');
    dialogmask = document.getElementById('dialog-mask');
	
	// show them //
    dialogmask.style.visibility = "visible";
    dialog.style.visibility = "visible";
  }
  
  dialog.style.opacity = .00;
  dialog.style.filter = 'alpha(opacity=0)';
  dialog.alpha = 0;
  
  // add the classes //
  dialogheader.className = "tableHeaderMenu";
  dialogcontent.className = "tableHeaderContent";
  
  // get the values //
  szTextString = parent.document.getElementById("drager" + szRowNumber).innerHTML;
  arrayTextString = szTextString.split('~');
  
  //fill the box //
  dialogtitle.innerHTML = arrayTextString[0] + ' - ' + arrayTextString[2];
  var szHTML = '<table style="table-layout: fixed; margin: 0px; padding: 0px;" cellpadding="0" cellspacing="0" width="620px"><tr><td style="vertical-align: top;">';
  szHTML = szHTML + '<i>Artist:</i>&nbsp;&nbsp;' + arrayTextString[0] + '<br>';
  szHTML = szHTML + '<i>Title:</i>&nbsp;&nbsp;' + arrayTextString[1] + '<br><br>';
  szHTML = szHTML + '<i>Label:</i>&nbsp;&nbsp;' + arrayTextString[3] + '<br>';
  szHTML = szHTML + '<i>Labelnumber:</i>&nbsp;&nbsp;' + arrayTextString[4] + '<br>';
  szHTML = szHTML + '<i>Country:</i>&nbsp;&nbsp;' + arrayTextString[5] + '<br>';
  szHTML = szHTML + '<i>Year:</i>&nbsp;&nbsp;' + arrayTextString[6] + '<br>';
  szHTML = szHTML + '<i>Style:</i>&nbsp;&nbsp;' + arrayTextString[7] + '<br>';
  szHTML = szHTML + '<i>Format:</i>&nbsp;&nbsp;' + arrayTextString[8] + '<br>';
  szHTML = szHTML + '<i>Grading:</i>&nbsp;&nbsp;' + arrayTextString[9] + '<br><br>';
  szHTML = szHTML + '<i>Price:</i>&nbsp;&nbsp;' + arrayTextString[10] + '<br><br>';
  if (arrayTextString[0] == 'V/A'){
	  szHTML = szHTML + '<i>Bands:</i>&nbsp;&nbsp;' + arrayTextString[12] + '<br><br>';
  }
  szHTML = szHTML + '<i>Information:</i>&nbsp;&nbsp;' + arrayTextString[11] + '</td>';
  szHTML = szHTML + '<td width="300px"><img src="Images/' + arrayTextString[13] + '.JPG" width="300px"></td></tr></table>';
  dialogcontent.innerHTML = szHTML;
  
    // set the measurements //
  var width = pageWidth();
  var height = pageHeight();
  var left = leftPosition();
  var top = topPosition();
  var dialogwidth = dialog.offsetWidth;
  //var dialogheight = dialog.offsetHeight;
  var dialogheight = 250;
  var topposition = top + (height / 3) - (dialogheight / 2);
  var leftposition = left + (width / 2) - (dialogwidth / 2);

  dialog.style.top = topposition + "px";
  dialog.style.left = leftposition + "px";
  
  var content = document.getElementById('content');
  dialogmask.style.height = content.offsetHeight + 'px';
  dialog.timer = setInterval('fadeDialog(1);', 5);
  dialogclose.style.visibility = "visible";
}

// hide the dialog box //
function hideDialog() {
  var dialog = document.getElementById('dialog');
  clearInterval(dialog.timer);
  dialog.timer = setInterval('fadeDialog(0);', 5);
}

// fade-in the dialog box //
function fadeDialog(flag) {
  if(flag == null) {
    flag = 1;
  }
  var dialog = document.getElementById('dialog');
  var value;
  if(dojo.isIE){
  	nFadePerc = 100;
  }else{
  	nFadePerc = 10;
  }
  if(flag == 1) {
    value = dialog.alpha + nFadePerc;
  } else {
    value = dialog.alpha - nFadePerc;
  }
  dialog.alpha = value;
  if (dojo.isIE){
	  dialog.style.filter = 'alpha(opacity=' + value + ')';
  }else{
	  dialog.style.opacity = (value / 100);
  }
  
  if(value >= 99) {
    clearInterval(dialog.timer);
    dialog.timer = null;
  } else{
	  if(value <= 1) {
    	dialog.style.visibility = "hidden";
    	document.getElementById('dialog-mask').style.visibility = "hidden";
    	clearInterval(dialog.timer);
	  }
  }
}