/**
* jQuery thumbImage plugin
* @version		$Id: jquery.thumbImage.js  $
* @package		jQuery thumbImage 1.0.1
* @copyright	Copyright (C) 2009 
* @license		GNU/GPL, see LICENSE.txt


 $(".thumbImage").thumbImage({
            width:100,
            height:80,
            maxVerticalOffset: 10 ,
            dropShadow : "none"
        });
*/

(function($) {

    $.fn.thumbImage = function(options) {
        var settings = jQuery.extend(
		{
		    defaultUnit: "px",
		    width: 100,
		    height: 100,
		    maxHorizontalOffset: 0,
		    maxVerticalOffset: 0, // Set the max vertical offset 

		    dropShadow: "none", // none, all, directional, //lower-right, lower-left, upper-right, upper-left

            clipImageClass: "clipImage",
            itemsClass: "items",
            scrollableClass: "scrollable",



		    showSelection: true, // display dropdown to select value
		    showUnit: true,

		    numeric: true,
		    selectionList: "",
		    selectedIndex: 0,

		    events: [], // Array of events to be triggerd
		    maxCharacters: 5, // Characters limit
		    status: true, // True to show status indicator bewlow the element
		    statusClass: "status", // The class on the status div
		    statusText: "character left", // The status text
		    notificationClass: "notification", // Will be added to the emement when maxlength is reached
		    showAlert: false, // True to show a regular alert message
		    alertText: "You have typed too many characters." // Text in the alert message
		    //slider: true // Use counter slider
		}, options);

        // Add the default event
        $.merge(settings.events, ['keyup']);

        return this.each(function() {
            var item = $(this);
//alert (item.width() + " src=" + item.attr("src") )
            //temp.click( _onClick);
            var imageContainer = $("<div class='thumbImage-div' ></div>");
            imageContainerClass = $(".thumbImage-div");
            imageContainer.css("width", settings.width + "px");
            imageContainer.css("height", settings.height + "px");
            imageContainer.css("overflow", "hidden");

            //alert(item.width())
            var count = item.parent("a").length;
            //alert("count=" + count)
            if (count > 0)
                item.parent("a").wrap(imageContainer);
            else
                item.wrap(imageContainer);

            // Calculate Horizontal margin
            var imgWidth = item.width();
            if (imgWidth < settings.width)
            {
            
                item.width(settings.width);
                
             }   
            var margin = parseInt((item.width() - settings.width) / 2);
//            if (settings.HorizontalOffset > 0) {
//                if (margin > settings.HorizontalOffset)
//                    margint = settings.HorizontalOffset;
//            }
            if (margin > 0)
            {
                margin = "-" + margin + "px";
                item.css("margin-left", margin);
            }


            // Calculate Vertical margin
            var imgHeight = item.height();
            if (imgHeight < settings.height)
            {
            
                item.height(settings.height);
                
             }   
//alert ("width=" + item.width() + " setting=" + settings.width)             
            var marginHeight = parseInt((item.height() - settings.height) / 2);
            if (settings.maxVerticalOffset > 0) {
                if (marginHeight > settings.maxVerticalOffset)
                    marginHeight = settings.maxVerticalOffset;
            }
            if (marginHeight > 0 )
            {
                marginHeight = "-" + marginHeight + "px";
                item.css("margin-top", marginHeight);
            }
            if (settings.dropShadow != "none") {
                //$("div.thumbImage-div")
                var divWrap = "";
                switch (settings.dropShadow) {
                    case "all":
                        divWrap = "<div class='dropshadow-wrap0'><div class='dropshadow-wrap1'><div class='dropshadow-wrap2'>" +
                                "<div class='dropshadow-wrap3'></div></div></div></div>";
                        break;

                    case "directional":
                        divWrap = "<div class='dropshadow-wrap0'><div class='dropshadow-wrap2'>" +
                                "<div class='dropshadow-wrap3'></div></div></div>";
                        break;

                }
                if (count > 0)
                    item.parent("a").parent(".thumbImage-div").wrap(divWrap);
                 else
                     item.parent(".thumbImage-div").wrap(divWrap);
            }
            
            item.css("display", "block");
            $("." + settings.clipImageClass).show();
            // Validate
            if (!validateElement()) {

                return false;
            }

            //            // Loop through the events and bind them to the element
            //            $.each(settings.events, function(i, n) {
            //                item.bind(n, function(e) {
            //                    charactersLength = item.val().length;
            //                    checkChars();
            //                });
            //            });


            // functions definition


            // Check if the element is valid.
            function validateElement() {
                var ret = false;

                if (item.is('img')) {
                    ret = true;
                    //                } else if (item.filter("input[type=text]")) {
                    //                    ret = true;
                    //                } else if (item.filter("input[type=password]")) {
                    //                    ret = true;
                }

                return ret;
            }
            //



        });
    };
})(jQuery);