function change_jcarousel(i)
{
	var mycarousel = document.getElementById('mycarousel'); 
	//play with margin  only when there are more than 4 items, reason for this is that when only using start(number_of_item) 
	//carousel doesn't work like it should after a few items
    if(playlist.length>0 && playlist.length<9)
    {
//    	var tomove = 256-(playlist.length*64);
//    	if(navigator.appName=='Microsoft Internet Explorer')
//    	{
//    		var cssText = mycarousel.style.getAttribute('cssText');
//    		cssText += '; margin-left:' + tomove + 'px !important;';
//    		mycarousel.style.setAttribute('cssText', cssText, 0);
//    	}
//    	else
//    	{
//    		var elementStyle = mycarousel.getAttribute('style');
//    		elementStyle += ' margin-left:' + tomove + 'px;';
//    		mycarousel.setAttribute('style', elementStyle);
//    	}
    }
    
	if(playlist.length>=9)
    {
		if(i == 0 || i < 0)
		{
			setElementLeftStyle(mycarousel, 0);
			changeClassNames('jcarousel-prev jcarousel-prev-horizontal ','jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal',0);
		}
		else
		{
           // alert(playlist.length-(i*5));
			//if last 4 items of playlist don't need to scroll more neither
			if(playlist.length-(i)<9)
			{
				setElementLeftStyle(mycarousel, -(100*(playlist.length-9)));
				changeClassNames('jcarousel-next jcarousel-next-horizontal','jcarousel-next jcarousel-next-horizontal jcarousel-next-disabled jcarousel-next-disabled-horizontal',1);
				changeClassNames('jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal','jcarousel-prev jcarousel-prev-horizontal',0);
			}
			else
			{
				setElementLeftStyle(mycarousel, -(100*(i)));
				changeClassNames('jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal','jcarousel-prev jcarousel-prev-horizontal',0);
				changeClassNames('jcarousel-next jcarousel-next-horizontal jcarousel-next-disabled jcarousel-next-disabled-horizontal','jcarousel-next jcarousel-next-horizontal',0);
			}
		}
    }
   // disableLinks(i);
}

function setElementLeftStyle(element, leftValue) {
	var currentStyleText;
	if(navigator.appName=='Microsoft Internet Explorer')
	{
		//currentStyleText = element.style.getAttribute('cssText');
	    //element.style.setAttribute('cssText', currentStyleText + "; left:" + leftValue + "px !important;", 0);
	    
        $('#mycarousel').animate({
            left: leftValue
          }, 250, function() {
        // Animation complete.
        });
	}
	else 
	{
		//currentStyleText = element.getAttribute('style');
		//element.setAttribute('style', currentStyleText + " left:" + leftValue + "px;");
        $('#mycarousel').animate({
            left: leftValue
          }, 250, function() {
        // Animation complete.
        });
	}
}

function changeClassNames(oldClassName,newClassName, disable) {
      var divs = document.getElementsByTagName('div');
      for (var ii=0;ii<divs.length;ii++) 
      {
      	var divclass = divs[ii].className;
      	if (divclass==oldClassName) 
      	{
      		divs[ii].className=newClassName;
      		
      		
      		if(navigator.appName=='Microsoft Internet Explorer')
    		{
    			divs[ii].disabled = (disable==1) ? true : false;
    		}
      		else
      		{
      			divs[ii].setAttribute('disabled',(disable==1 ? -1 : false)); 
      		}
      	}
      }
      return false;
}

//if selected item is first or last item than don't show next/previous link under selected item
function disableLinks(i)
{
	//first item, disable previous link
	if(i==0)
	{
		var previouslink = document.getElementsByName('prev');
		var previousimage  = document.getElementById('prevarrow');
		//ie needs other declaration
		if(navigator.appName=='Microsoft Internet Explorer')
    	{
    		for(var p=0;p<previouslink.length;p++)
    		{
    			previouslink[p].style.setAttribute('cssText', 'color:#FFFFFF !important ;cursor:default !important;display:none;');
    			previouslink[p].disabled = true;
    		}
    		//photocarousel
    		if(previousimage!=null)
    		{
    			previousimage.style.setAttribute('cssText', 'display:none !important;height:0px;width:0px;');
    		}
    	}
    	else
    	{
    		for(var t=0;t<previouslink.length;t++)
    		{
    			previouslink[t].setAttribute('style','color:#FFFFFF;cursor:default;');
    			previouslink[t].setAttribute('disabled',true);
    		}
    		//photocarousel
    		if(previousimage!=null)
    		{
    			previousimage.setAttribute('style','display:none;height:0px;width:0px;');
    		}
    	}
	}
	//last item, disable next link
	if(i+1==playlist.length)
	{
		var nextlink = document.getElementsByName('next');
		var nextimage = document.getElementById('nextarrow');
		//disable also arrowimage
		//ie needs other declaration
		if(navigator.appName=='Microsoft Internet Explorer')
		{
			for(var r=0;r<nextlink.length;r++)
			{
				nextlink[r].style.setAttribute('cssText', 'color:#FFFFFF !important ;cursor:default !important;display:none;');
    			nextlink[r].disabled = true;
			}
			//photocarousel
			if(nextimage!=null)
			{
				nextimage.style.setAttribute('cssText', 'display:none !important;height:0px;width:0px;');
			}
		}
		else
		{
			for(var n=0;n<nextlink.length;n++)
    		{
    			nextlink[n].setAttribute('style','color:#FFFFFF;cursor:default;display:none;');
    			nextlink[n].setAttribute('disabled',true);
    		}
    		//photocarousel
    		if(nextimage!=null)
    		{
    			nextimage.setAttribute('style','display:none;');
    		}
		}
	}
	// prev/next link need to be shown
	if(i!=0 || i+1!=playlist.length)
	{ 
		if(i!=0)
		{
			var previousimage  = document.getElementById('prevarrow');
			var previouslink = document.getElementsByName('prev');
			for(var b=0;b<previouslink.length;b++)
	    	{
	    		//ie needs other declaration
	    		if(navigator.appName=='Microsoft Internet Explorer')
				{
					previouslink[b].style.setAttribute('cssText','font-color:#154993 !important;');
					previouslink[b].disabled= false;
				}
				else
				{
	    			previouslink[b].setAttribute('style','color:#154993');
	    			previouslink[b].setAttribute('disabled',false);
				}
	    	}
	    	//photocarousel 
    		//ie needs other declaration
			if(previousimage!=null)
			{
	    		if(navigator.appName=='Microsoft Internet Explorer')
				{ 
					previousimage.className='numberitemleft';
					previousimage.style.setAttribute('cssText','display:block !important;text-align:left;')
				}
				else
				{
					previousimage.setAttribute('class','numberitemleft');
					previousimage.setAttribute('style','display:block;text-align:justify;');
				}
			}
		}
		if((i+1)!=playlist.length)
		{
			var nextimage = document.getElementById('nextarrow');
			var nextlink = document.getElementsByName('next');
			for(var k=0;k<nextlink.length;k++)
    		{
	    		if(navigator.appName=='Microsoft Internet Explorer')
	    		{
	    			nextlink[k].style.setAttribute('cssText', 'font-color:#154993 !important;');
	    			nextlink[k].disabled = false;
	    		}
	    		else
	    		{
	    			nextlink[k].setAttribute('style', 'color:#154993');
	    			nextlink[k].setAttribute('disabled', false);
	    		}
    		}
    		if(nextimage!=null)
    		{
    			if(navigator.appName=='Microsoft Internet Explorer')
	    		{
    				nextimage.className='numberitemright';
    				nextimage.style.setAttribute('cssText','display:block !important;text-align:justify;');
	    		}
	    		else
	    		{
		    		nextimage.setAttribute('class','numberitemright');
					nextimage.setAttribute('style','display:block;');	
	    		}
    		}
		}				
	}
}