Right now when the user clicks on this image, it rotates 180 degrees.
I want to update it to do this: If the user clicks the image, it rotates 180 degrees, but if the user clicks the image again, it rotates back to its original position.

Here's my javascript:

<!-- language: lang-js -->

var value = 0
$("#row-1").click(function(){
    value +=180;
    $("#image1").rotate({ animateTo:value});
});

HTML:

<!-- language: lang-html -->

<th style="text-align:left;" width="20%" id="row-2">
    Company<br>
    <span class="move_right">Name</span> 
    <img src="/images/sort-arrow-up.png" title="Sort by Company Name" alt="Sort by Company Name" class="sort-right move-left" id="image2" />
</th>

I know this has already been answered, but I wanted to get an answer with a fiddle on here. There is also a dependency on the jQueryRotate plugin.

Working Demo in Fiddle

HTML:

<!-- language: lang-html -->

<table>
    <th id="row-1">
        <p>Company</p>
        <span>Name</span> 
        <img id="image1" src="http://i.imgur.com/wO5gsMy.png"
             title="Sort by Company Name" alt="Sort by Company Name"
             width="25" height="25"/>
    </th>
</table>

JavaScript:

<!-- language: lang-js -->

var value = 0;
$("#row-1").click(function(){
    value = value ? 0: 180
    $("#image1").rotate({ animateTo:value});
});