var picStyle=0;
  var flag = 0;
  var picWidth = 200;
  var maxWidth = 500;
  var minWidth = 100;
  var intervalWidth = 15;
  var intervalTime = 10;
  var timeObj = null;
  var arrow_left = "../../../tplimg/arrow_left.gif";
  var arrow_right = "../../../tplimg/arrow_right.gif";
 function Bigger()
 {
          var layerObj = document.getElementById("imagePic");
          var arrowObj = document.getElementById("arrow");
          var width = layerObj.style.width;
		  if(parseInt(width)>maxWidth-150){flag = 1;}
          var left = arrowObj.style.left;
          if(width.indexOf('px')!=-1)
                  width = width.substring(0,width.indexOf('px'));
         if(left.indexOf('px')!=-1)
                  left = left.substring(0,left.indexOf('px'));
          if((parseInt(width) + intervalWidth)<maxWidth)
          {
                  layerObj.style.width = parseInt(width) + intervalWidth;
                   arrowObj.style.left = parseInt(left) + intervalWidth;
          }
          else if ((parseInt(width) + intervalWidth)>=maxWidth)
          {
                  layerObj.style.width = maxWidth;
                   var arrowImg = document.getElementById("arrowImg");
                   arrowImg.src = arrow_right;
                   if(timeObj!=null)
                   {
                            clearInterval(timeObj);
                            timeObj = null;
                   }
          }
          document.getElementById("leveldiv").style.display = 'none';
 }
 function Small()
 {
          var layerObj = document.getElementById("imagePic");
           var arrowObj = document.getElementById("arrow");
           var width = layerObj.style.width;
		   if(parseInt(width)<parseInt(maxWidth)/2+150){flag = 0;}
            var left = arrowObj.style.left;
          if(width.indexOf('px')!=-1)
                  width = width.substring(0,width.indexOf('px'));
                   if(left.indexOf('px')!=-1)
                  left = left.substring(0,left.indexOf('px'));
          if((parseInt(width) - intervalWidth)>minWidth)
          {
                  layerObj.style.width = parseInt(width) - intervalWidth;
                   arrowObj.style.left = parseInt(left) - intervalWidth;
          }
          else  if((parseInt(width) - intervalWidth)<= minWidth)
          {
                  layerObj.style.width = minWidth;
                   var arrowImg = document.getElementById("arrowImg");
                   arrowImg.src = arrow_left;
                   if(timeObj!=null)
                   {
                            clearInterval(timeObj);
                            timeObj = null;
                   }
          }
		  document.getElementById("leveldiv").style.display = 'none';
 }
 function change()
 {	 
         if(picStyle==0)
         {
                   timeObj = setInterval("Bigger()",intervalTime);
                   picStyle = 1;
         }
         else if(picStyle ==1)
         {
                   timeObj = setInterval("Small()",intervalTime);
                   picStyle = 0;
         }
 }