jQuery.noConflict();

var $j = jQuery;

$j(document).ready(function(){
		    
	$j('#slidebox-wrap div').css('cursor', 'pointer');
	
    $j('#slidebox-wrap div .expanded-info').hide();
    
    var boxNames = new Array("left","middle","right");
    var speed = "slow";             // speed of the animation. Possible values: slow, normal, fast

    var lineNormalWidth = "160px";  // normal width of the bottom colored line
    var lineWideWidth = "160px";    // wide width of the bottom colored line
    var lineSlimWidth = "0px";     // slim width of the bottom colored line
    
    var divNormalWidth = "165px";   // normal width of the div (the box)
    var divWideWidth = "420px";     // expanded width of the div (the box)
    var divSlimWidth = "38px";      // expanded width of the div (the box)
    

/*
    setSlim("left");
    setSlim("middle");
    setSlim("right");
    */
    //setNormal("left");
    //setNormal("middle");
    //setNormal("right");
	
	

    
   $j('#slidebox-wrap div').click(function(){
        if($j(this).attr('id') == "left" || $j(this).attr('id') == "middle" || $j(this).attr('id') == "right")
        {
            var id = $j(this).attr('id');
            if($j('#slidebox-wrap #' + id).css('width') == divWideWidth)
            {
                setAllNormal(); // sets normal on all boxes
            }
            else
            {
                setWide(id);
                setSlimExclude(id); // set slim on all boxes, except for the sent in id param
            }
        }
    });
    
   
  /* 
    $j('#slidebox-wrap div').hover(function(){
        $j(this).stop();
        if($j(this).attr('id') == "left" || $j(this).attr('id') == "middle" || $j(this).attr('id') == "right")
        {
            var id = $j(this).attr('id');
            setWide(id);
            setSlimExclude(id);
        }
    },function(){
		
//        $j(this).stop();
//        if($j(this).attr('id') == "left" || $j(this).attr('id') == "middle" || $j(this).attr('id') == "right")
//        {
//            var id = $j(this).attr('id');
//            setAllNormal();
//            //setNormal(id);
//        }
    });
    
    */ 
    // sets all the boxes to the normal size
    function setAllNormal()
    {
        for(var i=0; i < boxNames.length; i++)
        {
            setNormal(boxNames[i]);
        }
    }
    
    // sets all the normal boxes, but exludes the one with the exclude param value (exclude is a string which matches to the element id.. left, middle or right)
    function setSlimExclude(exclude)
    {
        for(var i=0; i < boxNames.length; i++)
        {
            if(boxNames[i] != exclude)
            {
                setSlim(boxNames[i]);
            }
        }
    }
    
    // sets the box with the id of varible cmd to the wide size
    function setWide(cmd)
    {
        //$j('#slidebox-wrap div#' + cmd + ' .expanded-info').show();
        //$j('#slidebox-wrap div#' + cmd + ' p').show(speed);
	    // show the expanded info after the wrap is expanded, this solves an IE bug where the content jumps outside of the frame during the animation
        
        $j('#slidebox-wrap #' + cmd + ' .line').animate({ width: lineWideWidth}, speed, null, function() { $j('#slidebox-wrap div#' + cmd + ' .expanded-info').show(); $j('#slidebox-wrap div#' + cmd + ' p').show(speed); } );
        $j('#slidebox-wrap #' + cmd).animate({ width: divWideWidth}, speed);
        /*
        $j('#slidebox-wrap #' + cmd + ' .line').animate({ width: lineWideWidth}, {queue: false, duration: 500 }, null, function() { $j('#slidebox-wrap div#' + cmd + ' .expanded-info').show(); $j('#slidebox-wrap div#' + cmd + ' p').show(speed); } );
        $j('#slidebox-wrap #' + cmd).animate({ width: divWideWidth}, {queue: false, duration: 500 }, 500);
        */
    }
    
    // sets the box with the id of varible cmd to the normal size
    function setNormal(cmd)
    {
        $j('#slidebox-wrap div#' + cmd + ' .expanded-info').hide();
        $j('#slidebox-wrap div#' + cmd + ' p').show(speed);
        
        $j('#slidebox-wrap #' + cmd + ' .line').animate({ width: lineNormalWidth}, speed );
        $j('#slidebox-wrap #' + cmd).animate({ width: divNormalWidth}, speed);
        /*
        $j('#slidebox-wrap #' + cmd + ' .line').animate({ width: lineNormalWidth}, {queue: false, duration: 500 }, 500 );
        $j('#slidebox-wrap #' + cmd).animate({ width: divNormalWidth}, {queue: false, duration: 500 }, 500);
        */
    }
    
    // sets the box with the id of varible cmd to the normal size
    function setSlim(cmd)
    {
        $j('#slidebox-wrap div#' + cmd + ' .expanded-info').hide();
        
        $j('#slidebox-wrap div#' + cmd + ' p').hide(speed);
        $j('#slidebox-wrap #' + cmd + ' .line').animate({ width: lineSlimWidth}, speed );
        $j('#slidebox-wrap #' + cmd).animate({ width: divSlimWidth}, speed);
        /*
        $j('#slidebox-wrap div#' + cmd + ' p').hide(speed);
        $j('#slidebox-wrap #' + cmd + ' .line').animate({ width: lineSlimWidth}, {queue: false, duration: 500 }, 500);
        $j('#slidebox-wrap #' + cmd).animate({ width: divSlimWidth}, {queue: false, duration: 500 }, 500);
        */
    }
});