$(document).ready(function(){ 

    if(jQuery.browser.msie)

      {

        $("#vml_ie").append("<style>v\:image { behavior:url(#default#VML); display:inline-block ; -ms-interpolation-mode: bicubic}</style>\n");

        $("#vml_ie").append("<xml:namespace ns=\"urn:schemas-microsoft-com:vml\" prefix=\"v\" />");

      } 

        $('#featured_home li').find("a.slider_img").preload();  

  /*

      

      

        

      <!-- Include the VML behavior -->

<style>v\:image { behavior:url(#default#VML); display:inline-block ; -ms-interpolation-mode: bicubic}</style>

<!-- Declare the VML namespace -->

<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />

 */

      /////////////////////////////

      // SLIDER

      /////////////////////////////

      // PARAMETERS:

      var $rotate_plus_sign_about = 360;    // degrees

      var $rotate_minus_sign_about = -360;  // degrees

      var $width_of_the_image = 162;        // width of ONE image in pixels, including the margin !!

      var $speed_of_moving = 0;             // in miliseconds, speed which are the images moving

      

      // SLIDER MAX is the minus sign

      // SLIDER MIN is the plus sign

      

      /////////////////////////////

      //INTERNAL PARAMS, PLEASE DONT CHANGE

      /////////////////////////////

	    var $rotmaxangle = 360;

      var $rotminangle = -360;

      var $es = $("#thumbs").find("li").size();   // el = Elements in Slider

      var $es_width = $width_of_the_image;

     

      $("#sl_content").css("width", $es_width * $es);

	    var $kook = 0;

      var $step = 0;

      var $actual_step = 0; 

      var $max_step = $es - 5;

      if(!($.browser.msie && $.browser.version=="6.0")) 

      {

       // $('#round_max').css("border", "1px solid black");

        $('#round_max').css("width", 26);	

        $('#round_max').css("height", 26);	

        $('#round_min').css("width", 26);	

        $('#round_min').css("height", 26);	

      }

      else

      {

      $('#round_max').css("margin", "34px 10px 33px 10px;");

      $('#round_min').css("margin", "34px 10px 33px 10px;");

     

      $('#sign_min').css("positon", "absolute");

      $('#sign_min').css("top", 40);

      $('#sign_min').css("left", 16);

      

      $('#sign_max').css("positon", "absolute");

      $('#sign_max').css("top", 40);

      $('#sign_max').css("left", 16);

       // $('#slider_max').("width", 26);	

      }

      

      	if(!($.browser.msie && $.browser.version=="6.0"))

      	{

      // we make objects from slider SIGNS

			     var rot=$('#sign_min').rotate(0);

			     var rota=$('#sign_max').rotate(0);

		    }

			if($.browser.msie && $.browser.version!="6.0")   // position of the signs in IE (dear got i was making that about 3 hours)

			{

  			rot[0].css("position", "absolute");

  			rot[0].css("top", 38);

  			rot[0].css("left", 13);	

  			rota[0].css("position", "absolute");

  			rota[0].css("top", 38);

  			rota[0].css("left", 13);

			}

			else if(!($.browser.msie && $.browser.version=="6.0"))                // position of the signs in normal working internet browser (mozilla, opera, etc)

			{

        rot[0].css("position", "absolute");

  			rot[0].css("top", 38);

  			rot[0].css("left", 13);

  			rota[0].css("position", "absolute");

  			rota[0].css("top", 37);

  			rota[0].css("left", 12);

      }

      

      // SLIDER MAX is the minus sign

      // SLIDER MIN is the plus sign

      $('#slider_max').hover(     // HERE WE SCALE THE CIRCLE WHEN THE MOUSE IS IN THE ELEMENT

      function () {

      if(!($.browser.msie && $.browser.version=="6.0")) 

      {

      $('#round_max').animate({ 

        width: 30, 

        height: 30,

        marginLeft: 10 ,

        marginTop:35

        }, 50 );

      }

      }, 

      function () {

      if(!($.browser.msie && $.browser.version=="6.0")) 

      {

        $('#round_max').animate({ 

        width: 26, 

        height: 26,

        marginLeft: 12 ,

        marginTop:37

        }, 50 );

        }

      });

      

    $('#slider_min').hover(   // HERE WE SCALE THE CIRCLE WHEN THE MOUSE IS IN THE ELEMENT

      function () {

       if(!($.browser.msie && $.browser.version=="6.0")) 

      {

      $('#round_min').animate({ 

        width: 30, 

        height: 30,

        marginLeft: 10 ,

        marginTop:35

        }, 50 );

        }

      }, 

      function () {

       if(!($.browser.msie && $.browser.version=="6.0")) 

      {

        $('#round_min').animate({ 

        width: 26, 

        height: 26,

        marginLeft: 12 ,

        marginTop:37

        }, 50 );

        }

      }); 

      

       // SLIDER MAX is the minus sign

      // SLIDER MIN is the plus sign

      

      // HERE IS THE ROTATING OF MINUS SIGN AND SLIDING

      $('#slider_max').click(function() {

      $('#slider').onselectstart = function () { return false; }

      $('#sign_max').stop();

      // IE fix

       if(!($.browser.msie && $.browser.version=="6.0")) 

      {

      if($rotminangle%360 == 0 && $.browser.msie)

      {

      	rota[0].animate({ 

        top: 38,

        left: 13

        }, 0 );

			}

			else if($.browser.msie)

		  {

		  	rota[0].animate({ 

        top: 37,

        left: 12

        }, 0 );

      }

      

      // main rotation

      rota[0].rotateAnimation($rotminangle);

      $rotminangle = $rotminangle - 360;

      }

      

      if($actual_step <= 0)   // if is the slider on the end, we make a bounce effect

      {

        $("#sl_content").stop(false, false);

        $("#sl_content").animate({marginLeft: +20}, 300 );

        $("#sl_content").animate({marginLeft: 0}, 80 );

      }

     else  // when the slider can move, we move it

      {

        $step =$es_width;

        $kook = $kook +  $step; 

        $("#sl_content").stop(false, false);

        $("#sl_content").animate({marginLeft: $kook}, 400 );

        $actual_step--;

      }

      });

        

        

        

       

       // SLIDER MAX is the minus sign

      // SLIDER MIN is the plus sign 

      $('#slider_min').click(function() {

      $('#sign_min').stop();

      // IE fix

       if(!($.browser.msie && $.browser.version=="6.0")) 

      {

      if($rotmaxangle%360 == 0 && $.browser.msie)

      {

      	rot[0].animate({ 

        top: 38,

        left: 14

        }, 0 );

			}

			else if($.browser.msie)

		  {

		  	rot[0].animate({ 

        top: 37,

        left: 13

        }, 0 );      

      }

      rot[0].rotateAnimation($rotmaxangle);

      $rotmaxangle = $rotmaxangle + 360;

      }

      if($actual_step >= $max_step) // if we cant move, do the bounce effect

      {

        $("#sl_content").stop(false, false);

        var $bounce = (($es * $es_width) - (5*$es_width)) * (-1);

        $("#sl_content").animate({marginLeft: $bounce - 20}, 300 );

        $("#sl_content").animate({marginLeft: $bounce}, 80 );

      }

      else    // else move the slider

      {

        $step = $es_width; 

        $kook = $kook -  $step; 

        $("#sl_content").stop(false, false);

        $("#sl_content").animate({marginLeft: $kook}, 300 );

        $actual_step++;

      }       

      });

     

      // CHANGING THE IMAGES     

      $('#featured_home li').click(function() {

        $("#slider_main_img").fadeTo(150, 0);   //  fade the MAIN IMAGE to WHITE. And when is the main image white, we call the callback function 

        $(this).fadeTo(150, 0.5,  function()    // fade all slider images to non transparent

        {// callback function

          // GETTING THE Attributes from slider

          $("#slider_post_cat").html($(this).find("div.slider_tit").html());

         // $("#slider_img_tit").attr("href", $(this).find("a.slider_tit").attr("href"));

            

          $("#slider_img_desc").html($(this).find("a.slider_desc").html());

          $("#slider_img_desc").attr("href", $(this).find("a.slider_desc").attr("href"));

          

          // FLIPPING THE IMAGE

          $("#slider_main_img").attr("src",$(this).find("a.slider_img").attr("href")); 

           $("#slider_main_img").fadeTo(150, 1); // FADING MAIN IMAGE TO NORMAL

        });

  

       

  

        $('#featured_home li').fadeTo(5, 1);      // FADE ALL SLIDER IMAGES TO NORMAL

  		  $(this).fadeTo(150, 1);



      });

       

  });