/*
	jquery-flipspin.js for jQuery
	(c) 2009 Robin Morero <http://www.morero.se>
	MIT-style license.
*/


(function($) {

jQuery.fn.extend({
        flipSpin: function() {

            $(this.selector).before("<div class='flipSpin'><!--<input type=button value='Rotera' class=fsRotate>&nbsp;&nbsp;//--><input type=button value='V&auml;nd' class=fsFlip></div>");


            
            $('.flipSpin .fsFlip').live("click",function(e){
               $(this).parent().parent().find("canvas").flipHorizontal(); 
               $(this).parent().parent().find("img").flipHorizontal(); 
            });

            $('.flipSpin .fsRotate').live("click",function(e){
               $(this).parent().parent().find("canvas").rotate(90); 
               $(this).parent().parent().find("img").rotate(90); 
            });



          

        },


	rotate: function(degrees) {

                return this.each(function(){
			var img = this;
                        var flipped,context;

                      if($.browser.msie){
                        var x;
                        degrees=Math.abs(degrees); 
                        if(degrees>0){
                          x=Math.round(degrees/90);
                        }
                        while(x>3){
                          x=x-3; 
                        } 
                       
                        var rotation;
                        rotation=$(img).attr("IERotation");
                        if(!rotation) rotation=0;
                        rotation= parseInt(rotation);
                        rotation=rotation+x;
                        while(rotation>3){
                          rotation=rotation-4; 
                        } 
                        $(img).attr("IERotation",rotation);
                        var newWidth,newHeight;

                        if(rotation==0 || rotation==2){
                           newWidth=img.height;
                           newHeight=img.width;
                        } 
                        else{
                           newWidth=img.height;
                           newHeight=img.width;
                        }


                        if($(img).hasClass("flipped")){
                          $(img).css("filter", "flipv progid:DXImageTransform.Microsoft.BasicImage(rotation="+rotation+");");
                        }
                        else{
                          $(img).css("filter", "progid:DXImageTransform.Microsoft.BasicImage(rotation="+rotation+");");
                        }
                        $(img).css("height", newHeight);
                        $(img).css("width", newWidth);

                      }
                      else{
                        
                        // Create canvas element
                        flipped = document.createElement('CANVAS');
                        flipped.setAttribute('width',img.width);
                        flipped.setAttribute('height',img.height);
                        flipped.className=img.className;
      
                        $(img).replaceWith(flipped);

                        if (!flipped.getContext) return;
                         
                        var canvasContext = flipped.getContext("2d");
                        var canvas=flipped;

		switch(degrees) {
			default :
			case 0 :
				canvas.setAttribute('width', img.width);
				canvas.setAttribute('height', img.height);
				canvasContext.rotate(degrees * Math.PI / 180);
				canvasContext.drawImage(img, 0, 0,img.height,img.width);
				break;
			case 90 :
				canvas.setAttribute('width', img.height);
				canvas.setAttribute('height', img.width);
				canvasContext.rotate(degrees * Math.PI / 180);
				canvasContext.drawImage(img, 0,-img.height,img.width,img.height);
				break;
			case 180 :
				canvas.setAttribute('width', img.width);
				canvas.setAttribute('height', img.height);
				canvasContext.rotate(degrees * Math.PI / 180);
				canvasContext.drawImage(img, -img.width, -img.height,img.height,img.width);
				break;
			case 270 :
			case -90 :
				canvas.setAttribute('width', img.height);
				canvas.setAttribute('height', img.width);
				canvasContext.rotate(degrees * Math.PI / 180);
				canvasContext.drawImage(img, -img.width, 0, img.width,img.height);
				break;
		};

                      }
                        
                });
	},

	flipVertical: function() {

                return this.each(function(){
			var img = this;
                        var flipped,context;

                      if($.browser.msie){
                        if($(img).hasClass("flipped")){
                          $(img).css({filter: ""});
                          $(img).removeClass("flipped");
                        }
                        else{
                          $(img).css({filter: "flipv"});
                          $(img).addClass("flipped");
                        }
                      }
                      else{
                        // Create canvas element
                        flipped = document.createElement('CANVAS');
                        flipped.setAttribute('width',img.width);
                        flipped.setAttribute('height',img.height);
                        flipped.className=img.className;
      
                        $(img).replaceWith(flipped);

                        if (!flipped.getContext) return;
                        context = flipped.getContext("2d");
                          
                        if($(img).hasClass("flipped")){
                          $(img).removeClass("flipped");
                        }
                        else{
                          $(img).addClass("flipped");
                        }
                        context.scale(1,-1);
		        context.drawImage(img, 0,-img.height,  img.width, img.height);
                        context.save();
                        context.restore();

                      }
                        
                });
	},

	flipHorizontal: function() {

                return this.each(function(){
			var img = this;
                        var flipped,context;

                      if($.browser.msie){
                        if($(img).hasClass("flipped")){
                          $(img).css({filter: ""});
                          $(img).removeClass("flipped");
                        }
                        else{
                          $(img).css({filter: "fliph"});
                          $(img).addClass("flipped");
                        }
                      }
                      else{
                        // Create canvas element
                        flipped = document.createElement('CANVAS');
                        flipped.setAttribute('width',img.width);
                        flipped.setAttribute('height',img.height);
                        flipped.className=img.className;
      
                        $(img).replaceWith(flipped);

                        if (!flipped.getContext) return;
                        context = flipped.getContext("2d");
                          
                        if($(img).hasClass("flipped")){
                          $(img).removeClass("flipped");
                        }
                        else{
                          $(img).addClass("flipped");
                        }
                        context.scale(-1,1);
		        context.drawImage(img, -img.width,0,  img.width, img.height);
                        context.save();
                        context.restore();

                      }
                        
                });
	}


});

})(jQuery);