$(function() {


    //lastBlock = $(".first");

    var $selected = $("#span" + $("#hdnLetter").val());
    var lastBlock = "#span" + $("#hdnLetter").val();
    $selected.toggleClass("selected");
    $selected.toggleClass("first");
    //alert(selected);

    //$(selected).toggleClass("selected");

    maxWidth = 265;
    minWidth = 15;

    // this will allow the back button to go back when needed. 
    // when going from proile to search we have to do a load and pass saved settings due to ajax.

    $("#backButtonGif").click(
                        function() {
                            var $btn = $("#backButtonGif");
                            var lnk = $btn.attr('href');
                           
                            if (lnk.indexOf("&") > -1) {
                                window.location = $btn.attr('href');

                            }
                            else {
                                window.history.back();
                            }
                        });
    //drop the search box down 
    //css on the web version
  /*  $("#searchButtonGif").click(
        function() {
            var $sf = $("#searchform")
            $sf.toggleClass("notvisible");
            $("#searchButtonGif").toggleClass("searchButtonGifDown");
        }

    );

    //drop the Disciplines box down
    $("#ddDisciplineCtrl").click(
        function() {
            $("#ddDisciplineCtrl").toggleClass("ddDisciplineCtrlDown");
            $("#ddDiscipline").toggleClass("notvisible");

        }

    );
    */
    // selector click
    $("span.enabled").click(
          function() {
              $(lastBlock).animate({ width: minWidth + "px" }, { queue: false, duration: 400 });
              $(this).animate({ width: maxWidth + "px" }, { queue: false, duration: 400 });
              $(lastBlock).toggleClass("selected");
              $(this).toggleClass("selected");
              lastBlock = this;
          }
        );

    //image click
    $("span.enabled span").click(
          function() {

              var ctrlName = '#div' + this.innerHTML;

              //$('div.canvas')



              $('#ajaxBusy').show();

              var $rl = $('#reloadable');
              $rl.innerHtml = '';
              var url = 'oneletter.aspx?letter=' + ctrlName.substr(ctrlName.length - 1, 1)
                                                                + '&txtFname=' + $('#hdnTxtFname').val()
                                                                + '&rblFname=' + $('#hdnRblFname').val()
                                                                + '&txtLname=' + $('#hdnTxtLname').val()
                                                                + '&rblLname=' + $('#hdnRblLname').val()
                                                                + '&theme=' + $('#hdnTheme').val()
                                                                + '&discipline=' + $('#hdnDiscipline').val()
                                                                ;

              //alert(url);

              $rl.load(url, function() {
                  ajaxFinished();
              }
                                       );
          }
        );

    /**/
    //scroll right
    $("#leftcontrol").click(function() {

        $('#slidingwindow').animate({
            left: '+=205', easing: 'easeOutCubic'
        }, 500);

        keepvisibleRight();

    });


    //scroll left
    $("#rightcontrol").click(function() {

        $('#slidingwindow').animate({
            left: '-=205', easing: 'easeOutCubic'
        }, 500);


        keepvisibleLeft();

    });

    //attach events to newly loaded ajax elements
    reload();


});

//don't let the viewport become completely empty

 function  inject(l) {

    
     var letter = $('.selected').attr("ID").substr(4, 1);
     var url = $(l).attr('href2');
    
     $(l).attr('href', url 
                         + '&lpos=' + $('#slidingwindow').css("left")
                         + '&letter=' + letter
                         
                         + '&txtFname=' + $('#hdnTxtFname').val()
                         + '&rblFname=' + $('#hdnRblFname').val()
                         + '&txtLname=' + $('#hdnTxtLname').val()
                         + '&rblLname=' + $('#hdnRblLname').val()
                         + '&discipline=' + $('#hdnDiscipline').val()
                         );  //

   // alert(     $(l).attr('href')     );
     
    return true;
    
}

//don't let the viewport become completely empty
function keepvisibleLeft() {
    var $sl = $('#slidingwindow');
    var w = parseInt($sl.css("width"));
    var l = parseInt($sl.css("left"));

    if ((l * -1) > (w - 200)) {

        $sl.animate({ left: (w - 100) * -1, easing: 'easeOutCubic' }, 500);
    }
}

function keepvisibleRight() {
    var $sl = $('#slidingwindow');
    var w = parseInt($sl.css("width"));
    var l = parseInt($sl.css("left" ));

    if (l > 600) {

        $sl.animate({ left: (700), easing: 'easeOutCubic' }, 500);
    }

}

function keepvisible() {
        
        var $sl = $('#slidingwindow');
   
        var w = parseInt($sl.css("width"));
        var l = (parseInt($sl.css("left")) );
        
      
        if ((l * -1) > (w-10)) {
        
            $sl.animate({left: (w-100) * -1 , easing: 'easeOutCubic'}, 500);
         }
         if (l > 790) {
        
            $sl.animate({left: (700)  , easing: 'easeOutCubic'}, 500);
         }

     }
    
// for debugging
function report() {
    var $sl = $('#slidingwindow');
    var w = parseInt($sl.css("width"));
    var l = (parseInt($sl.css("left")));

    alert(
             'left=' + l + ';' +
             'width' + w
         );

}


function ajaxFinished() { 
        $('#ajaxBusy').hide();
        reload();
}

function reload() {
    var $sl = $('#slidingwindow')
    $sl.draggable(
                                    { axis: 'x' },
                                    { stop: function() { keepvisible(); } }
    );









        $("#slidingwindow img").mouseover(

                        function() {

                        	var $t = $(this);
                            	$t.animate(
                                 { left: '-=10',
                                     top: '-=10',
                                     height: '+=20',
                                     width: '+=20'
                                 },
                                 175)

                        });

    $(".slidingwindow img").mouseout(

                        function() {
                            var $t = $(this);
                            $t.animate(
                                {
                                    left: '+=10',
                                    top: '+=10',
                                    height: '-=20',
                                    width: '-=20'
                                },
                                    175);

                        });


               

                    
}