var numberDisplayed = 7; //must be an odd number, needs to be at least two more pictures than this number to work properly
    var flatness = .5; // the amount of height difference between each image, negative numbers invert the curve
    var imageTop = 10; //height from top of gallery to tallest image, my have to be adjusted if flatness is changed
    var imgWidth = 200; // max display width of the images before centerImageScale
    var imgHeight = 100; // max display Height of the images before centerImageScale
    var centerImageScale = 1.5; //size ratio of center image to max imgWidth and imgHeight
    var imgSpacing = .6; //how closely the images are spaced as a ratio
    var cycleSpeed = 1000; // how fast the gallery changes images
    var removeMiddleReflection = true; //weither the reflection on an image disapears when it moves to the center
    var imageArray = new Array();
    var positionArray = new Array();
    var titleArray = new Array();
     var urlArray = new Array();
     var idArray = new Array();
     var canCycle = true;
     var containerWidth;
     var containerHeight;
     var middleImage;
     var movesToMake = 0; //for cycling through multiple images on click
     var t;
     var currentPosition;
     var currentIndex;
     var sliderStepSize;
    
     $(document).ready(function(){
     
        containerWidth = $(".coverFlow").innerWidth();
        containerHeight = $(".coverFlow").innerHeight();
        middleImage = Math.floor(numberDisplayed/2);
        currentPosition = 0;
        loadImages();  
                   
     });
     
     function createSlider()
     {
        sliderStepSize = Math.round(600/(imageArray.length - 1));
       
        $("#slider").slider({
            value:100,
            min: 0,
            max: 600,
            step: sliderStepSize,
            slide: function(event, ui) {
               currentPosition = -1*((ui.value/sliderStepSize) - parseInt(middleImage));
               updatePositions();
            }
        });
     }
     
     function loadImages()
     {  
        urlArray.length = 0;
        $("#imageSource li").each(function(){
            urlArray.push($(this).children("img").attr("src"));
            titleArray.push($(this).children("div").html());
            idArray.push($(this).children("input").val());
        });
        $('#imageSource').remove();
        
        for(var i in urlArray)
        {
            var newImage = $('<div class="imageHolder" ><img class="topImage" src="'+urlArray[i]+'" alt="coverflow image" /></div>').prependTo(".coverFlow");
            imageArray.push(newImage);
        }
        
        if(numberDisplayed > imageArray.length){numberDisplayed = imageArray.length;}
        
        reflections();
        
        createPositions();
        createSlider();
        setPositions();
     }
     
     function createPositions()
     {
        var increment = containerWidth / numberDisplayed * imgSpacing;
        var maxY = containerHeight / Math.floor(numberDisplayed/2);
        for( var i = 0; i < numberDisplayed; i++)
        {
           var scale = (Math.abs( i - middleImage) / numberDisplayed);
           scale = Math.sqrt(scale);
           
           if(i - middleImage < 0)
           {
             var sign = 1;
             var z = i;
           }
           else
           {
             var sign = -1;
             var z = imageArray.length - i;
           }
           
           var position = new Object();
           position.scale = (3*(1 - scale) + 1 )/4;
           position.left = containerWidth/2 - (increment * numberDisplayed * scale * sign) - (imgWidth * position.scale / 2)
           position.top = maxY * flatness * scale + imageTop;
           position.index = i;
           positionArray.push(position);
        }
        //center image is sized seperately
        positionArray[middleImage].left =  containerWidth/2 - (imgWidth * centerImageScale / 2)
        positionArray[middleImage].scale = centerImageScale;
     }
     
     function reflections()
     {
        for(var i in imageArray)
        {
            $(imageArray[i]).append('<div class="reflectionHolder"><img class="reflection" src="'+urlArray[i]+'" /><img class="reflectionOverlay" src="/images/car-viewer/fade.png" alt="coverflow image" /></div>');
        }
        
        $(".reflectionOverlay").css({left:0, top:0});
        $(".reflection").transform({scaleY: -1}); 
     }
          
     function cycleRight()
     {
        if(canCycle == true)
        {
            canCycle = false;
            currentPosition--;
            if(currentPosition < - 1 * (imageArray.length - middleImage - 1))
            {
              currentPosition =  - 1 * (imageArray.length - middleImage - 1);
            }
            updatePositions();
        }
        return false; 
     }
     
     function cycleLeft()
     {
        if(canCycle == true)
        {
            canCycle = false;
            currentPosition++;
            if(currentPosition > middleImage)
            {
              currentPosition = middleImage;
            }
            updatePositions();
        }
        
        return false; 
     }
     
     function cycleTo(clickId)
     {
        var activePosition = -1 * currentPosition + parseInt(middleImage);
     
         if(clickId != activePosition)
         {
            currentPosition = -1 * (clickId - parseInt(middleImage));
            updatePositions();
         }
         else
         {
            window.location = "/vehicle.aspx?id=" + idArray[clickId];
         }
     }
     
     function updatePositions()
     {
        var halfCycle = Math.floor(cycleSpeed/2);
        currentIndex = -1 * currentPosition + parseInt(middleImage);
        
        //move slider 
        $('#slider').slider('option', 'value', currentIndex * sliderStepSize);
                  
        for(var i in imageArray)
        {
            var place = parseInt(i) + currentPosition;
            if(place < 0){place = 0;}
            if(place > positionArray.length - 1){place = positionArray.length - 1;}
                              
            $(imageArray[i]).find("img").not(".reflectionOverlay").stop().animate({height: imgHeight * positionArray[place].scale , width: imgWidth * positionArray[place].scale},cycleSpeed);
            $(imageArray[i]).find(".reflectionOverlay").stop().animate({height: imgHeight * positionArray[place].scale + 10 , width: imgWidth * positionArray[place].scale + 10},cycleSpeed); //stretch reflection png over dropshadow
            $(imageArray[i]).show().css({cursor:"pointer"}).stop().animate({left: positionArray[place].left, top: positionArray[place].top},cycleSpeed);    
                             
            $(imageArray[i]).unbind().bind('click', {id : i}, function(e){
                cycleTo(e.data.id);
            });
            
            //set z-index
            if(currentIndex - i > 0)
            {
               
                var theZIndex = i - currentIndex + 20;
            }
            else
            {
                 var theZIndex = currentIndex - i + 20;
            }
            
            $(imageArray[i]).css({zIndex: theZIndex, cursor:"pointer"});
        }
         
        var time = setTimeout("canCycle = true;",cycleSpeed); 
     
        $(imageArray[currentIndex]).css({cursor:"default"});
        
        $("#titleAndPrice").fadeOut(halfCycle , function(){
                $(this).html(titleArray[currentIndex]).fadeIn(halfCycle);
        });
        
        if( removeMiddleReflection == true)
        {
             if(currentPosition == - 1 * (imageArray.length - middleImage - 1) || currentPosition == middleImage)
             {
                 $(".reflectionHolder:hidden").show(); 
                 $(imageArray[currentIndex]).children(".reflectionHolder").hide();
             }
             else
             {
                $(".reflectionHolder:hidden").show(halfCycle); 
                $(imageArray[currentIndex]).children(".reflectionHolder").hide();
             }
        }
     }
     
     function setPositions()
     {
        $("#titleAndPrice").html(titleArray[middleImage]);
        
        $('#slider').slider('option', 'value', middleImage * sliderStepSize);
       
        for(var i in imageArray)
        {
            var place = parseInt(i) + currentPosition;
            if(place < 0){place = 0;}
            if(place > positionArray.length - 1){place = positionArray.length - 1;}
          
            //set z-index
            if(i - middleImage < 0)
            {
                var theZIndex = i - middleImage + 20;
            }
            else
            {
                var theZIndex = middleImage - i + 20;
            }
            $(imageArray[i]).css({zIndex: theZIndex,cursor:"pointer"})
            
            if( i < numberDisplayed  )
            {
               //set onclick events
                $(imageArray[i]).bind('click', {id : i}, function(e){
                    cycleTo(e.data.id);
                });
            }
            
            $(imageArray[i]).find("img").not(".reflectionOverlay").css({height: imgHeight * positionArray[place].scale , width: imgWidth * positionArray[place].scale});
            $(imageArray[i]).find(".reflectionOverlay").css({height: imgHeight * positionArray[place].scale + 10 , width: imgWidth * positionArray[place].scale + 10}); //stretch reflection png over dropshadow
            $(imageArray[i]).css({left: positionArray[place].left, top: positionArray[place].top});
        }
        $(imageArray[middleImage]).css({cursor:"default"}).children(".reflectionHolder").hide(); 
        
        if (jQuery.browser.msie && parseInt(jQuery.browser.version) > 6)//repositions reflection in ie
        {
             $(".reflectionHolder").css({top:"-10px",left:"-1px"});
        }
        else
        {
             $(".reflectionOverlay").css({left:"-5px"});
        }
     }