var m_arImages;
var m_leftbuttonid;
var m_rightbuttonid;
var m_showcovers;
var m_showfrom;
var m_imagediv;
var m_imagecount;

/*Detect the browser used. This is used in the AfterLoad function to get the padding of the div.*/
var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{ 	string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},
		{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari"
		},
		{
			prop: window.opera,
			identity: "Opera"
		},
		{
			string: navigator.vendor,
			subString: "iCab",
			identity: "iCab"
		},
		{
			string: navigator.vendor,
			subString: "KDE",
			identity: "Konqueror"
		},
		{
			string: navigator.userAgent,
			subString: "Firefox",
			identity: "Firefox"
		},
		{
			string: navigator.vendor,
			subString: "Camino",
			identity: "Camino"
		},
		{		// for newer Netscapes (6+)
			string: navigator.userAgent,
			subString: "Netscape",
			identity: "Netscape"
		},
		{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		},
		{
			string: navigator.userAgent,
			subString: "Gecko",
			identity: "Mozilla",
			versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
			string: navigator.userAgent,
			subString: "Mozilla",
			identity: "Netscape",
			versionSearch: "Mozilla"
		}
	],
	dataOS : [
		{
			string: navigator.platform,
			subString: "Win",
			identity: "Windows"
		},
		{
			string: navigator.platform,
			subString: "Mac",
			identity: "Mac"
		},
		{
			string: navigator.platform,
			subString: "Linux",
			identity: "Linux"
		}
	]

};
BrowserDetect.init();


function AfterLoad(imagedivid)
{
    var tableWidth=0;
    var testdiv = document.getElementById(imagedivid);
    var padding=0;
    var borderWidth=0;

    if (testdiv!=null)
    {
        for (i=0; i < m_imagecount; i++)
        {
            var div = testdiv.childNodes.item(i);
            if(div != null)
            {
        	    if(div.childNodes.length  > 0){
        		    if(div.childNodes.item(0).childNodes.length  > 0){
        			    if(div.style.display != 'none'){
        				    if (BrowserDetect.browser == 'Explorer'){
        					    if (div.currentStyle.borderWidth != null){
        						    if (div.currentStyle.borderWidth.indexOf('px') != -1){
        							    borderWidth += parseInt(div.currentStyle.borderWidth.replace('px','')) * 2;
        						    }
        					    }
        					    if (div.currentStyle.paddingLeft != null){
        						    padding += parseInt(div.currentStyle.paddingLeft.replace('px',''));
        					    } 
        					    if (div.currentStyle.paddingRight != null){
        						    padding += parseInt(div.currentStyle.paddingRight.replace('px',''));
        					    } 
        				    } else {
        					    if (window.getComputedStyle(div,null).borderLeftWidth != null){
        						    borderWidth += parseInt(window.getComputedStyle(div,null).borderLeftWidth.replace('px',''));
        					    }
        					    if (window.getComputedStyle(div,null).borderRightWidth != null){
        						    borderWidth += parseInt(window.getComputedStyle(div,null).borderRightWidth.replace('px',''));
        					    }
	        				    if (window.getComputedStyle(div,null).paddingLeft != null){
	        					    padding += parseInt(window.getComputedStyle(div,null).paddingLeft.replace('px',''));
	        				    }
	        				    if (window.getComputedStyle(div,null).paddingRight != null){
	        					    padding += parseInt(window.getComputedStyle(div,null).paddingRight.replace('px',''));
	        				    }
        				    }
        				    tableWidth += div.childNodes.item(0).childNodes.item(0).width + padding + borderWidth;
      					    padding = 0;
		                borderWidth = 0;
	          	    }
          	    }
              }
            }
       }
   }
   testdiv.style.width = tableWidth;
}

function InitCovers(showcovers, imagedivid, selectedcover)
{
    //m_arImages=arImages;
    m_leftbuttonid='imgLeft';
    m_rightbuttonid='imgRight';
    m_showcovers=showcovers;
   /* alert('image array loaded!');
    for (i=0; i < arImages.length; i++)
    {
        var newDiv = document.createElement('div');
        var link = document.createElement('a');
        var image = document.createElement('img');
        image.setAttribute('src',arImages[i]);
        link.appendChild(image);
        newDiv.appendChild(link);
        newDiv.setAttribute("class", "IssueControl_imagediv");
        document.getElementById('divImages').appendChild(newDiv);
    }
    */
    
    m_imagediv = document.getElementById(imagedivid);
    if (m_imagediv!=null)
    {
        m_imagecount = m_imagediv.childNodes.length;
        if(m_showcovers>m_imagecount)
            m_showcovers=m_imagecount;
            
        //init showfrom
        if ((m_imagecount-showcovers)>=0)
            m_showfrom=(m_imagecount-showcovers);
        else    
            m_showfrom=0;
            
        //show selectedcover as last cover
        ShowSelectedCover(selectedcover);

        ShowButtons();    
        ShowCovers();
    }
    
}

function ShowCovers()
{
   
    var j=0;

    for (i=0; i < m_imagecount; i++)
    {
        var div = m_imagediv.childNodes.item(i)
        if(j<m_showcovers && i>=m_showfrom)
        {
          
            div.style.display='';
            j++
        }
        else       
            div.style.display='none';
    }
}

function moveLeft()
{
m_showfrom--;
ShowButtons();
ShowCovers();
}

function moveRight()
{
m_showfrom++;
ShowButtons();
ShowCovers();
}

function ShowButtons()
{
    if (m_showfrom>0)
    {
   		//show left button
    document.getElementById(m_leftbuttonid).style.display='';
    }
    else
    {
   		//hide left button
    document.getElementById(m_leftbuttonid).style.display='none';
    }

    if ((m_showfrom + m_showcovers)<m_imagecount)
    {
    	//show right button
    	document.getElementById(m_rightbuttonid).style.display='';
    }
    else
   	 {
    	//hide right button
    	document.getElementById(m_rightbuttonid).style.display='none';
    }
}

function Cover_Clicked(ControlID, IssueID, TextboxID, DoPostBack)
{
    var txtIssueID = document.getElementById(TextboxID)
    txtIssueID.value=IssueID;
           
     //set css class to IssueControl_imagediv_selected for selected cover
     
     var j=0;
     
     for (i=0; i < m_imagecount; i++)
     {
        var div = m_imagediv.childNodes.item(i)
        if(div.getAttribute('name') ==  ControlID)
        {
            div.className = 'IssueControl_imagediv_selected';
            j++
        }
        else       
            div.className = 'IssueControl_imagediv';
     }
     
      if(DoPostBack==1)
        __doPostBack('__Page', 'CoverClicked');
}

function ShowSelectedCover(ControlID)
{    
     
     for (i=0; i < m_imagecount; i++)
     {
        var div = m_imagediv.childNodes.item(i)
        if(div.getAttribute('name') ==  ControlID)
        {
           m_showfrom=(i-m_showcovers+1);
           if (m_showfrom<0)
           		m_showfrom=0;
        }
     }
}

function ClearSelection(TextboxID, DoPostBack)
{

    var txtIssueID = document.getElementById(TextboxID)
    txtIssueID.value='';
           
     //set css class to IssueControl_imagediv for all covers
     
     var j=0;
     
     for (i=0; i < m_imagecount; i++)
     {
        var div = m_imagediv.childNodes.item(i)
        div.className = 'IssueControl_imagediv';
     }
     
      if(DoPostBack==1)
        __doPostBack('__Page', 'CoverClicked');

}