jQuery.fn.imageslider = function() {

    var speed = ($j("#speed").val()) * 2;
    var transition =  $j("#transition").val();

    $j(".paging").show();
    $j(".paging a:first").addClass("active");

    //Get size of the image, how many images there are, then determin the size of the image reel.
    var imageWidth = $j(".window").width();
    var imageSum = $j(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;
    
        
    //Adjust the image reel to its new size
    $j(".image_reel").css({'width' : imageReelWidth});

    rotate = function(){
        
        var triggerID = $active.attr("rel") - 1; //Get number of times to slide
        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
        
       // alert($active.attr("rel"));
        
        $j(".paging a").removeClass('active'); //Remove all active class
        $active.addClass('active'); //Add active class (the active is declared in the rotateSwitch function)

        //Slider Animation
        $j(".image_reel").animate({
            left: -image_reelPosition
        }, transition );

    };

    //Rotation  and Timing Event
    rotateSwitch = function(){
        play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
            $active = $j('.paging a.active').next(); //Move to the next paging
            if ( $active.length === 0) { //If paging reaches the end...
                $active = $j('.paging a:first'); //go back to first
            }
            rotate(); //Trigger the paging and slider function
        }, speed); //Timer speed in milliseconds (7 seconds)
    };

   rotateSwitch(); //Run function on launch


    $j(".image_reel a").hover(function() {
        clearInterval(play); //Stop the rotation
        }, function() {
        rotateSwitch(); //Resume rotation timer
    });

    //On Click
    $j(".paging a").click(function() {
        $active = $j(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation timer
        return false; //Prevent browser jump to link anchor
    });
    //On Click
  
}


jQuery.fn.imagesliderAces = function() {
    
    speed = ($j(".window").attr("rel")) * 2;
    transition =  $j(".paging").attr("rel");
    
        
    $j(".paging").show();
    $j(".paging a:first").addClass("active");

    $j(".PAGING_TITLE:first").addClass("active");
    //Get size of the image, how many images there are, then determin the size of the image reel.
    var imageWidth = $j(".window").width();
    var imageSum = $j(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;
    
        
    //Adjust the image reel to its new size
    $j(".image_reel").css({'width' : imageReelWidth});

    rotate = function(){
        var triggerID = $active.attr("rel") - 1; //Get number of times to slide
        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
        
       // alert($active.attr("rel"));
        
        $j(".paging a").removeClass('active'); //Remove all active class
        $j(".PAGING_TITLE").removeClass('active'); //Remove all active class
        $active.addClass('active'); //Add active class (the active is declared in the rotateSwitch function)
        $activetitle.addClass('active');
        //Slider Animation
        $j(".image_reel").animate({
            left: -image_reelPosition
        }, transition );

    };
    
    rotateNow = function(){
        
        var triggerID = $active.attr("rel") - 1; //Get number of times to slide
        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
        
       // alert($active.attr("rel"));
        
        $j(".paging a").removeClass('active'); //Remove all active class
        $j(".PAGING_TITLE").removeClass('active'); //Remove all active class
        $active.addClass('active'); //Add active class (the active is declared in the rotateSwitch function)
        $activetitle.addClass('active');
        //Slider Animation
        document.getElementById("image_reel_item").style.left=-image_reelPosition+"px";
//        $j(".image_reel").animate({
//            left: -image_reelPosition
//        }, transition );

    };

    //Rotation  and Timing Event
    rotateSwitch = function(){
        play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
            $active = $j('.paging a.active').next(); //Move to the next paging
            $activetitle= $j(".PAGING_TITLE.active").next();
            if ( $active.length === 0) { //If paging reaches the end...
                $active = $j('.paging a:first'); //go back to first
                $activetitle= $j(".PAGING_TITLE:first");
            }
            rotate(); //Trigger the paging and slider function
        }, speed); //Timer speed in milliseconds (7 seconds)
    };

   rotateSwitch(); //Run function on launch


    $j(".image_reel a").hover(function() {
        clearInterval(play); //Stop the rotation
        }, function() {
        rotateSwitch(); //Resume rotation timer
    });

    //On HOVER FOR ACES!
    $j(".paging a").hover(function() {
        $active = $j(this); //Activate the hovered paging
        $title_id='#title_'+$j(this).attr('id')
        $activetitle= $j($title_id);
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotateNow(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation timer
        return false; //Prevent browser jump to link anchor
    });

}

var $j = jQuery.noConflict();

$j(document).ready(function() {
    
    if($j("#HOMEPAGE_FLASH_BANNER").length != 0){
        $j("#HOMEPAGE_FLASH_BANNER").imageslider();
	}
    if($j("#HOMEPAGE_FLASH_BANNER_ACES").length != 0){
        $j("#HOMEPAGE_FLASH_BANNER_ACES").imagesliderAces();
	}

});