jQuery(document).ready(function($) {

	$(".index-menu").hover(function() { //On hover...

		var thumbOverLeft = $(this).find("img.indexleft").attr("src"); //Get image url and assign it to 'thumbOver'
                var thumbOverRight = $(this).find("img.indexright").attr("src");
                var thumbOverTitle = $(this).find("h2").attr("Tcolor");
		//Set a background image(thumbOver) on the <a> tag - Set position to bottom
		$(this).find("a.thumbleft").css({'background' : 'url(' + thumbOverLeft + ') no-repeat center bottom'});
                $(this).find("h2").css({'color' : thumbOverTitle});
                $(this).find("a.thumbright").css({'background' : 'url(' + thumbOverRight + ') no-repeat center bottom'});

		//Animate the image to 0 opacity (fade it out)
		$(this).find("span.right").stop().fadeTo('normal', 0 , function() {
			$(this).hide() //Hide the image after fade
		});
                $(this).find("span.left").stop().fadeTo('normal', 0 , function() {
			$(this).hide() //Hide the image after fade
		});
	} , function() { //on hover out...
		//Fade the image to full opacity
		$(this).find("span.right").stop().fadeTo('normal', 1).show();
                $(this).find("span.left").stop().fadeTo('normal', 1).show();
                $(this).find("h2").css({'color' : 'white'});
	});
        $(".tech-spec-button").hover(function() { //On hover...

		var thumbOver = $(this).find("img.techspec").attr("src"); //Get image url and assign it to 'thumbOver'

        //Set a background image(thumbOver) on the <a> tag - Set position to bottom
		$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
                
		//Animate the image to 0 opacity (fade it out)
		$(this).find("span").stop().fadeTo('normal', 0 , function() {
		$(this).hide() //Hide the image after fade
		});
	} , function() { //on hover out...
		//Fade the image to full opacity
		$(this).find("span").stop().fadeTo('normal', 1).show();
	});

        $(function() {
				 /**
                * interval : time between the display of images
                * playtime : the timeout for the setInterval function
                * current  : number to control the current image
                * current_thumb : the index of the current thumbs wrapper
                * nmb_thumb_wrappers : total number of thumbs wrappers
                * nmb_images_wrapper : the number of images inside of each wrapper
                */
                var interval            = 6000;
                var playtime;
                var current             = 0;
                var current_thumb       = 0;
                var nmb_thumb_wrappers  = $('#msg_thumbs .msg_thumb_wrapper').length;
                var nmb_images_wrapper  = 3;
                /**
                * start the slideshow
                */
                play();

                /**
                * show the controls when
                * mouseover the main container
                */
                slideshowMouseEvent();
                function slideshowMouseEvent(){
                    $('#msg_slideshow').unbind('mouseenter')
                                       .bind('mouseenter',showControls)
                                       .andSelf()
                                       .unbind('mouseleave')
                                       .bind('mouseleave',hideControls);
                    }

                /**
                * clicking the grid icon,
                * shows the thumbs view, pauses the slideshow, and hides the controls
                */
                $('#msg_grid').bind('click',function(e){
                    hideControls();
                    $('#msg_slideshow').unbind('mouseenter').unbind('mouseleave');
                    pause();
                    $('#msg_thumbs').stop().animate({'top':'0px'},500);
                    e.preventDefault();
                });

                /**
                * closing the thumbs view,
                * shows the controls
                */
                $('#msg_thumb_close').bind('click',function(e){
                    showControls();
                    slideshowMouseEvent();
                    $('#msg_thumbs').stop().animate({'top':'-230px'},500);
                    e.preventDefault();
                });

                /**
                * pause or play icons
                */
                $('#msg_pause_play').bind('click',function(e){
                    var $this = $(this);
                    if($this.hasClass('msg_play'))
                        play();
                    else
                        pause();
                    e.preventDefault();
                });

                /**
                * click controls next or prev,
                * pauses the slideshow,
                * and displays the next or prevoius image
                */
                $('#msg_next').bind('click',function(e){
                    pause();
                    next();
                    e.preventDefault();
                });
                $('#msg_prev').bind('click',function(e){
                    pause();
                    prev();
                    e.preventDefault();
                });

                /**
                * show and hide controls functions
                */
                function showControls(){
                    $('#msg_controls').stop().animate({'right':'15px'},500);
                }
                function hideControls(){
                    //$('#msg_controls').stop().animate({'right':'-110px'},500);
                }

                /**
                * start the slideshow
                */
                function play(){
                    next();
                    $('#msg_pause_play').addClass('msg_pause').removeClass('msg_play');
                    playtime = setInterval(next,interval)
                }

                /**
                * stops the slideshow
                */
                function pause(){
                    $('#msg_pause_play').addClass('msg_play').removeClass('msg_pause');
                    clearTimeout(playtime);
                }

                /**
                * show the next image
                */
                function next(){
                    ++current;
                    showImage('r');
                }

                /**
                * shows the previous image
                */
                function prev(){
                    --current;
                    showImage('l');
                }

                /**
                * shows an image
                * dir : right or left
                */
                function showImage(dir){
                    /**
                    * the thumbs wrapper being shown, is always
                    * the one containing the current image
                    */
                    alternateThumbs();

                    /**
                    * the thumb that will be displayed in full mode
                    */
                    var $thumb = $('#msg_thumbs .msg_thumb_wrapper:nth-child('+current_thumb+')')
                                .find('a:nth-child('+ parseInt(current - nmb_images_wrapper*(current_thumb -1)) +')')
                                .find('img');
                    if($thumb.length){
                        var source = $thumb.attr('alt');
                        var $currentImage = $('#msg_wrapper').find('img');
                        if($currentImage.length){
                            $currentImage.fadeOut(function(){
                                $(this).remove();
                                $('<img />').load(function(){
                                    var $image = $(this);
                                    resize($image);
                                    $image.hide();
                                    $('#msg_wrapper').empty().append($image.fadeIn());
                                }).attr('src',source);
                            });
                        }
                        else{
                            $('<img />').load(function(){
                                    var $image = $(this);
                                    resize($image);
                                    $image.hide();
                                    $('#msg_wrapper').empty().append($image.fadeIn());
                            }).attr('src',source);
                        }

                    }
                    else{ //this is actually not necessary since we have a circular slideshow
                        if(dir == 'r')
                            --current;
                        else if(dir == 'l')
                            ++current;
                        alternateThumbs();
                        return;
                    }
                }

                /**
                * the thumbs wrapper being shown, is always
                * the one containing the current image
                */
                function alternateThumbs(){
                    $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
                                    .hide();
                    current_thumb = Math.ceil(current/nmb_images_wrapper);
                    /**
                    * if we reach the end, start from the beggining
                    */
                    if(current_thumb > nmb_thumb_wrappers){
                        current_thumb   = 1;
                        current         = 1;
                    }
                    /**
                    * if we are at the beggining, go to the end
                    */
                    else if(current_thumb == 0){
                        current_thumb   = nmb_thumb_wrappers;
                        current         = current_thumb*nmb_images_wrapper;
                    }

                    $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
                                    .show();
                }

                /**
                * click next or previous on the thumbs wrapper
                */
                $('#msg_thumb_next').bind('click',function(e){
                    next_thumb();
                    e.preventDefault();
                });
                $('#msg_thumb_prev').bind('click',function(e){
                    prev_thumb();
                    e.preventDefault();
                });
                function next_thumb(){
                    var $next_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb+1)+')');
                    if($next_wrapper.length){
                        $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
                                        .fadeOut(function(){
                                            ++current_thumb;
                                            $next_wrapper.fadeIn();
                                        });
                    }
                }
                function prev_thumb(){
                    var $prev_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+parseInt(current_thumb-1)+')');
                    if($prev_wrapper.length){
                        $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child('+current_thumb+')')
                                        .fadeOut(function(){
                                            --current_thumb;
                                            $prev_wrapper.fadeIn();
                                        });
                    }
                }

                /**
                * clicking on a thumb, displays the image (alt attribute of the thumb)
                */
                $('#msg_thumbs .msg_thumb_wrapper > a').bind('click',function(e){
                    var $this       = $(this);
                    $('#msg_thumb_close').trigger('click');
                    var idx         = $this.index();
                    var p_idx       = $this.parent().index();
                    current         = parseInt(p_idx*nmb_images_wrapper + idx + 1);
                    showImage();
                    e.preventDefault();
                }).bind('mouseenter',function(){
                    var $this       = $(this);
                    $this.stop().animate({'opacity':1});
                }).bind('mouseleave',function(){
                    var $this       = $(this);
                    $this.stop().animate({'opacity':0.5});
                });

                /**
                * resize the image to fit in the container (400 x 400)
                */
                function resize($image){
                    var theImage    = new Image();
                    theImage.src    = $image.attr("src");
                    var imgwidth    = theImage.width;
                    var imgheight   = theImage.height;

                    var containerwidth  = 400;
                    var containerheight = 400;

                    if(imgwidth > containerwidth){
                        var newwidth = containerwidth;
                        var ratio = imgwidth / containerwidth;
                        var newheight = imgheight / ratio;
                        if(newheight > containerheight){
                            var newnewheight = containerheight;
                            var newratio = newheight/containerheight;
                            var newnewwidth =newwidth/newratio;
                            theImage.width = newnewwidth;
                            theImage.height= newnewheight;
                        }
                        else{
                            theImage.width = newwidth;
                            theImage.height= newheight;
                        }
                    }
                    else if(imgheight > containerheight){
                        var newheight = containerheight;
                        var ratio = imgheight / containerheight;
                        var newwidth = imgwidth / ratio;
                        if(newwidth > containerwidth){
                            var newnewwidth = containerwidth;
                            var newratio = newwidth/containerwidth;
                            var newnewheight =newheight/newratio;
                            theImage.height = newnewheight;
                            theImage.width= newnewwidth;
                        }
                        else{
                            theImage.width = newwidth;
                            theImage.height= newheight;
                        }
                    }
                    $image.css({
                        'width' :theImage.width,
                        'height':theImage.height
					});
				}
            });
});