﻿function gtsCarousel(count, images){
 
        function showArrows(){
            $('.left, .right').css('display', 'inline');
        }
 
        var displayCount = count;             /*--- BUILT ON THIS VARIABLE!!! ---*/     //Define INT for state # of Items to be visible
        var right = 0;                                                                  //List Positition    
        var allPhotos = images;                                                         //All Photos
        var photosCount = allPhotos.length;                                             //Count of ALL photos                       
        
        if(photosCount<displayCount)displayCount=photosCount;                           //Display Area Size                        
        var arrCar = new Array();                                                       //Initiate Carousel Array                        
        if(photosCount>1) showArrows();                                                 //Show Arrows                         
 
        for(n = 0; n<photosCount; n++)                                                  //Push Into Carousel Array Needed Photos
        {
            if(n<(displayCount))
            {
                var tempImg = new Image();
                tempImg.src = allPhotos[n];
                arrCar.push(tempImg.src);
            }
        }
 
        var carCount = arrCar.length;
        
        /*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_PRINT_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_*/
        for(var i = 0; i<arrCar.length; i++){
            $('.carousel-list').append("<li class='carousel-item modal_photo_fade'><span class='fade_off'><span class='photo fade_img'><img src='"+arrCar[i]+"'/></span></span></li>");
        }                        
        /*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_PRINT_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_*/
        
        var $carouselItem = $('.carousel-item');                                        //All Items In Carousel
        var $carouselList = $('.carousel-list');                                        //Whole Carousel List
        var $bigImage = $('.big-image img');                                            //Big Image
        var clickCount = 0;                                                             //Click Counter
        
        $bigImage.parent().html("<img src='"+arrCar[0]+"'/>");
        
        var margin = parseInt($($carouselItem).css('borderRightWidth'))*2;              //Border l/r of Item
           // var realWidth = parseInt($('.modal_photo_fade').css('width'));      
        var itemW = $carouselItem.width();                            //Width of Item
        
        var listW = (margin+itemW)*(displayCount);                                      //Width of whole carousel list
        var displayW = ((margin+itemW)*(displayCount))-margin;                          //Width of display mask
 
        //$('.car-wrap').css('width', displayW+'px');                                     //Set width of display mask
        //$($carouselList).css('width', listW+'px');                                      //Set width of Carousel list
 
        /*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_*/
 
        /*--- START ADD ITEM ---*/
        function addItem(){
            if(carCount===photosCount) return false;                                    //Due Dillegence
            listW += (itemW+2);                                                    //Increast List Width To Accomodate New Items
            //$($carouselList).css('width', listW+'px');                                  //Set Width
            $($carouselList).append("<li class='carousel-item modal_photo_fade'><span class='fade_off'><span class='photo fade_img'><img src='"+allPhotos[carCount]+"' /></span></span></li>"); 
            $carouselItem = $('.carousel-item');                                        //Reset Items In Carousel
            directClick();                                                              //Reintiate Click Events
            carCount++;                                                                 //Adjust Car Arr Count
        }
        /*--- END ADD ITEM ---*/
 
        /*--- START DIRECT CLICK ---*/
        function directClick(){
            $($carouselItem).each(function(index){
                $(this).unbind('click');                                                //Unbind Click Events
                $(this).click(function(e){                                              //Set Click Events
                    
                    right = (itemW+2)*index;                                       //Set Right Relative List Index                                    
                    clickCount = index;                                                  //Set Click Count Relative Index
                    var displayPos = $(this).data('position');                          //Current Display Position 
                    removeData();                                                       //Remove Relative Position Data                                    
                    
                    if(clickCount==0){
                        //$('#leftButton').html("<img src='"+WebRoot+"images/lft-grey.png'/>");
                    }else{
                        //$('#leftButton').html("<img src='"+WebRoot+"images/lft.png'/>");
                    }

                    //if(clickCount == photosCount-1)$('.right').html("<img src='"+WebRoot+"images/rght-grey.png'/>"); 

                    if(carCount<photosCount){                                           //If All Photos Not Loaded
                        for(var p=0; p<displayPos; p++){                                
                            addItem();                                                  //Add Items Relative To Display Position
                        }
                    }

                    /*SET DATA and SET IMAGE*/
                    for(var i = 0; i<displayCount; i++){
                        $($carouselItem[index+i]).data('position',i);
                        if(i===0){
                            $($carouselItem[index+i]).addClass('selected');
                            var $imgSrc = $carouselItem.eq(clickCount+i).children().eq(0).children().eq(0).children().eq(0).attr('src');
                            setBigImg($imgSrc, $bigImage);
                        }
                    }
                    
                    
                    
                    $carouselList.animate({"marginLeft":right*(-1)+'px'}, 300);                //ANIMATE or MOVE
                   
                });
            });
        }
        directClick();
        /*--- END DIRECT CLICK ---*/
 
        /*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_*/
 
        /*--- START DATA ---*/
        $($carouselItem).each(function(index){                                          //Intitiate Display Data
            if(index<displayCount) $(this).data("position", index);                     //Add Display Data
            if(index===0) $(this).addClass('selected');                                 //Initiate Selected Class
        });

        function removeData(){                                                          //Clear Display Data Function
            $($carouselItem).each(function(){
                $(this).removeData("position");                                         //Remove Display Data
                $(this).removeClass("selected");                                        //Remove Selected Class
            });
        }
        /*--- END DATA ---*/
 
        /*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_*/
 
         /*--- START LEFT/RIGHT ---*/
        $('.prev.left, .next.right').each(function(){
            $(this).click(function() {
                if($(this).attr('class')=='prev left'){                                     /*LEFT BUTTON*/

                    if( clickCount > 0 ){                                               //AWARENESS CHECK
                        right -= (itemW+2);                                        //RIGHT POSITION MINUS ONE "UNIT"
                        clickCount--;                                                   //AWARENESS MINUS 1
                    }
                    
                    //if(clickCount === 0) $('#leftButton').html("<img src='"+WebRoot+"images/lft-grey.png'/>");
                    //if(clickCount < photosCount) $('#rightButton').html("<img src='"+WebRoot+"images/rght.png'/>");
 
                }else{                                                                  /*RIGHT BUTTON*/
                    if( clickCount < photosCount-1 ){                                   //AWARENESS CHECK
                        right += (itemW+2);
                        //right += (itemW+margin);  
                        //alert(itemW);  
                        //alert(margin);                                    //RIGHT POSITION PLUS ONE "UNIT"
                        clickCount++                                                    //AWARENESS PLUS 1
                        //console.log(clickCount);
                        //console.log(photosCount);
                        //if(clickCount == photosCount-1) $('#rightButton').html("<img src='"+WebRoot+"images/rght-grey.png'/>");
                    }
                    
                    //$('#leftButton').html("<img src='"+WebRoot+"images/lft.png'/>");                                                                                   
                    if((carCount)<photosCount) addItem();                               //GOING RIGHT? MORE PHOTOS? ADD ONE!                             
                }
 
                removeData();
                for(var i = 0; i<displayCount; i++){
                    $($carouselItem[clickCount+i]).data('position',i);
                    if(i===0){
                        $($carouselItem[clickCount+i]).addClass('selected');
                        var $imgSrc = $carouselItem.eq(clickCount+i).children().eq(0).children().eq(0).children().eq(0).attr('src');
                        setBigImg($imgSrc, $bigImage);
                    }
                }
                
                $($carouselList).animate({"marginLeft":right*(-1)+'px'}, 400);                    //ANITMATE or MOVE
            });
        });
        /*--- END LEFT/RIGHT ---*/
 
        /*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_*/

    }
 
    function PhotoGallery(id)
    {
        
        $("#GTSCarousel-wrap").modal({
            overlayClose:true,
            opacity:70,
            onClose: function (dialog) {
                //TODO: Joey Temp
                swap_flash('.has_flash');
                $.modal.close();
            }
            
            
        });
        
        //TODO: Joey Temp
        swap_flash('.has_flash');
        
        gtsCarousel(5, ArrLImg[id]);
    }

    function setBigImg($imgSrc, $bigImage) {

        $('.big-image img').attr('src', $imgSrc);

    }

