var W, H; 
/**
* used for image slider 
* preloads images into cache 
**/
function preload_img()
{
    var holder = new Image();

    for (var i = 0; i < current_img.length; ++i)
    {
        holder.src = current_img[i];
    }
}


/**
 * IE: get screen dimensions
 * sets the curtain 
 **/
function getS()
{
    var w = 0, h = 0;

    if (typeof (window.innerWidth) == 'number')
    {
        w = window.innerWidth;
        h = window.innerHeight;
    } 
    else if (document.documentElement
        && (document.documentElement.clientWidth || document.documentElement.clientHeight))
    {
        w = document.documentElement.clientWidth;
        h = document.documentElement.clientHeight;
    }

    else if (document.body && (document.body.clientWidth || document.body.clientHeight))
    {
        w = document.body.clientWidth;
        h = document.body.clientHeight;
    }

    curtain.style.width = w + "px";

    // set height to fixed in CSS, not here 
    curtain.style.height = h + "px";
}

    

/** 
 * use for image slider 
 * moves to next image
 * stops ss 
 **/
function hardslide(option)
{
    var option = (option) ? option : null; 
    if (option == null) { 
        pause();
            
        // play or pause
        pORp = true; 
        
        $('play_pause').className = "play"; 
        
        var old = $('slide_show_img');
        var img = document.createElement('img');
        img.setAttribute('id', 'slide_show_img');
        img.setAttribute('src', images[current_img]);
      
        $('divimg').replaceChild(img, old);
        imgorgH = img.height;
        
       var d = document.getElementById('img_title');

       d.innerHTML = titles[current_img];
       drag_image(); 
      
    }
}

   
/** 
 * Sets Zoom increment 
 */
function setnewdimesions () 
{
        h =  H  / 100; 
        w =  W  / 100; 
}
   
       
/** 
* main call show
**/
function slideShow()
{
    preload_img();
    Effect.Appear("MEDIA_CURTAIN");

    var d = document.getElementById('img_title');

    d.innerHTML = titles[current_img];

    d.style.display = "none";
    curtain = document.getElementById('MEDIA_CURTAIN');

    getS();

    var img = document.createElement('img');

    img.setAttribute('id', 'slide_show_img');

    img.setAttribute('src', images[current_img]);

    $('divimg').innerHTML = ''; 
    var divimg = $('divimg').appendChild( img ) ; 
 
    Effect.Appear("img_title");

    current_img++;

    if (current_img == max)
    {
        current_img = 0;
    }


   /**
    * different ss states: 
    * bool variables ss states one and two 
    * 
    **/
    if (slide_show_state == 0)
        {
        advertise = document.getElementById('c4');

        advertise.style.display = 'none';

        searchbox = document.getElementById('id_select_search');

        if (searchbox)
            {
            searchbox.style.display = 'none';
            }
        }
  
    	 H = $('slide_show_img').height;
         W = $('slide_show_img').width;
         setnewdimesions(); 

    /**
     * bool ss state 2 
     * implement slider , control panel setup
     *  gets called once 
     **/
    if (slide_show_state2 == 0)
    {
        var con = control_panel();
        document.getElementById('viewer').appendChild(con);

         slidetwo = new Control.Slider('handle2', 'track2',
            {
            axis: 'horizontal',
            range: $R(0, max - 1),
            minimum: 0,
            maximum: max - 1,
            increment: 1,
            onSlide: function(v)
                {
                $('output2').innerHTML =   Math.round(v +1);
                $('output2').innerHTML =   Math.round(v +1);
                current_img = Math.round(v);
                hardslide();
                },
            onChange: function(v)
                {
             $('output2').innerHTML =   Math.round(v +1);
                hardslide(1);
                }
            });



         // controls zoom
         slideone = new Control.Slider('handle3', 'track3',
            {
            range: $R(1, 200),
            sliderValue: 100 ,
            minimum:1,
            maximum: 200,
            increment: 1,
            onSlide: function(v)
                {
                	$('output13').innerHTML = 'Zoom:<span id="zoom_num" >' + Math.round(v) + '%</span>';
                	// ie6&7 
                	 movebackground(v);
                     $('slide_show_img').style.height =  Math.round( v )  * h + 'px' ; 
                     $('slide_show_img').style.width =   Math.round( v )  * w + 'px';
                     $('slide_show_img').style.left = 0 ; 
            		 $('slide_show_img').style.top = 0 ; 
                	
                },
            onChange: function(v)
                {
                	 $('output13').innerHTML = 'Zoom:<span id="zoom_num" >' + Math.round(v) + '%</span>';
                     $('slide_show_img').style.height = Math.round(v) * h + 'px'; 
                     $('slide_show_img').style.width = Math.round(v) * w + 'px'; 
                     $('slide_show_img').style.left = 0 ; 
                     $('slide_show_img').style.top = 0 ;  
                }
            });
        }

        var imagenumber = current_img; 
        if (imagenumber ==  0 ) { 

             $('output2').innerHTML =  max;
             slidetwo.setValue ( max ); 

    	} else { 

             $('output2').innerHTML =  imagenumber - 1;
             slidetwo.setValue (imagenumber -1 ); 
    	} 
        
    slide_show_state = 1;

    slide_show_state2 = 1;

   /*
    * sets the timer unless otherwise noted 
    */ 
    if (play != "off")
        {
        timer = setTimeout("slideShow()", 7000);

        fadetime = setTimeout("fading()", 5900);
        }
        
        drag_image(); 
    }

   
/**
 * IE Fix for zoom 
 */
function movebackground(v)
{
    	$('track2').style.backgroundPosition = v +'px top' ; 
}
    
    
     
/** 
 * closes show
 **/
function close_curtain()
{
    Effect.Fade('MEDIA_CURTAIN');

    advertise.style.display = 'block';

    if (searchbox)
    {
        searchbox.style.display = 'block';
    }

    clearTimeout(timer);

    clearTimeout(fadetime);

    slide_show_state = 0;
}

    
/**
 * timeout all 
 */
function clearalltime(option)
{
    var option = (option == null) ? 1 : option;

    if (option == 0)
    {
        if (current_img <= 1)
        {
            if (current_img == 0)
            {
                current_img = max - 2;
            } else {
                current_img = max;
                current_img--;
            }
        } else {
            current_img = current_img - 2;
        }
    }

    clearTimeout(timer);
    clearTimeout(fadetime);
}

  
/**
 * play or pause interface 
 */ 
pORp = false;    
function plypause() { 
	if (pORp == false ) { 

		pause(); 
		pORp = true;
		return "play";
	} else { 
		Play(); 
		pORp = false; 
		return "pause"; 
	}	
}


/**
 * pause  
 */ 
function pause()
{
    clearTimeout(timer);
    clearTimeout(fadetime);
    play = "off";
}

    
/**
 * play   
 */ 
play = "on";

function Play()
{
    if (play == "off")
    {
        slideShow();
        timer = setTimeout("slideShow()", 7000);
        fadetime = setTimeout("fading()", 5900);
    }

    play = "on";
}

    
/**
 * fade out 
 */ 
function fading()
{
    Effect.Fade('slide_show_img');
    Effect.Fade('img_title');
}
 
/**
 * make img zoomable
 **/
function drag_image () 
{
    var dragin =      drag_scroll("divimg" ) ;
}
    
/**
 * build control panel
 **/
function control_panel()
{
    var div = document.createElement('div');
    div.setAttribute("id","cPanel");
 
    var main =
            '<a onclick="clearalltime(0);slideShow();" id="prev"> </a><a class="pause" id="play_pause" onclick="var stats = plypause();this.className = stats;"> </a> <a onclick="clearalltime(1); slideShow();"  id="next"></a> <a onclick="close_curtain();" id="close"> </a>';

    var sl =
            '<a onclick="" id="zoom_out" ></a><a onclick="" id="zoom_in"></a><div id="output13" >Zoom:&nbsp;<span id="zoom_num">100%</span></div><div id="track3" style="width:100px;height:12px;"><div class="selected" id="handle3" style="width: 5px; height: 12px;"></div></div>';
   
    var sl2 =
            '<div  id="slide_counter">Image <span id="output2"> 1 </span><span> of ' + max + '</span></div><div id="track2" style="width:100px;height:4px;"><div class="selected" id="handle2" style="width: 5px; height: 12px;"><img src="/i/slideshow/slider_handle.png" /></div></div>';
            
    var endDiv = '</div>';
    div.innerHTML = main  + sl + sl2 + endDiv;
	
    return div;
    
}