(function(jQuery){
     //define the new for the plugin ans how to call it
     jQuery.fn.contactable = function(options) {
     //set default options
     var defaults = {
        name: 'Emri:',
        emails: 'E-mail:',
        message : 'Mesazhi:',
        recipient : 'ashqip@ashqip.com',
        subject : 'Mesazh kontaktimi',
        recievedMsg : 'Ju faleminderit per mesazhin tuaj!',
        notRecievedMsg : 'Na vjen keq por mesazhi juaj nuk mund te dergohet tani, provoni me vone!',
	disclaimer: '<br />Fushat me (*) jane te detyrueshme!',
	telefon: 'Telefon/Fax:',
        autoret: '<strong>Autoret:</strong>'
     };
     //call in the default otions
     var options = jQuery.extend(defaults, options);
     //act upon the element that is passed into the design
     return this.each(function(options) {
        //construct the form
        jQuery(this).html('<div id="contactable"><b>&#8220;@&#8221;</b></div><form id="contactForm" method="" action=""><div id="loading"></div><div id="callback"></div><div class="holder"><input type="hidden" id="recipient" name="recipient" value="'+defaults.recipient+'" /><input type="hidden" id="subject" name="subject" value="'+defaults.subject+'" /><label for="name">Emri <span class="red"> * </span></label><br /><input id="name" class="contact" style="color:#000000" name="name" /><br /><label for="email">E-Mail <span class="red"> * </span></label><br /><input id="email" class="contact" style="color:#000000" name="email" /><br /><label for="comment">Mesazhi <span class="red"> * </span></label><br /><textarea id="comment" style="color:#000000" name="comment" class="comment" rows="6" cols="30" ></textarea><input class="submit" type="submit" value="Dergo"/>'+defaults.disclaimer+'<hr />'+defaults.telefon+'<br />'+defaults.emails+'<br />'+defaults.autoret+'</div></form>');
        //show / hide function
        jQuery('div#contactable').toggle(function() {
	jQuery('#overlay').css({display: 'block'});
	jQuery(this).animate({"marginLeft": "-=5px"}, "fast");
	jQuery('#contactForm').animate({"marginLeft": "-=0px"}, "fast");
	jQuery(this).animate({"marginLeft": "+=387px"}, "slow");
	jQuery('#contactForm').animate({"marginLeft": "+=390px"}, "slow");
     },
     function() {
        jQuery('#contactForm').animate({"marginLeft": "-=390px"}, "slow");
	jQuery(this).animate({"marginLeft": "-=387px"}, "slow").animate({"marginLeft": "+=5px"}, "fast");
	jQuery('#overlay').css({display: 'none'});
     });
     //validate the form
     jQuery("#contactForm").validate({
        //set the rules for the fild names
	rules: {
           name:{    required: true, minlength: 2},
           email:{   required: true, email: true},
	   comment:{ required: true}
	},
	//set messages to appear inline
	messages: { name: "", email: "", comment: "" },
	submitHandler: function() {
            jQuery('.holder').hide();
	    jQuery('#loading').show();
	    jQuery.get('mail.php',{recipient:jQuery('#recipient').val(), subject:jQuery('#subject').val(), name:jQuery('#name').val(), email:jQuery('#email').val(), comment:jQuery('#comment').val()},
	    function(data){
                 jQuery('#loading').css({display:'none'});
		 if( data == 'success'){
                     jQuery('#callback').show().append(defaults.recievedMsg);
                 }else{   jQuery('#callback').show().append(defaults.notRecievedMsg); }
	    });
	}
     });
  });
};
//end the plugin call
jQuery.fn.kujemi = function(options) {
     //act upon the element that is passed into the design
     return this.each(function(options) {
	    jQuery(this).html('<div id="kujemi"><b>&#8220;?&#8221;</b></div><div id="kujemidiv"><div class="holder"><div id="map_canvas" style="width:340px; height:463px"></div></div>');
            //show / hide function
            jQuery('div#kujemi').toggle(function() {
                 jQuery('#overlay').css({display: 'block'});
                 jQuery(this).animate({"marginLeft": "-=5px"}, "fast");
	         jQuery('#kujemidiv').animate({"marginLeft": "-=0px"}, "fast");
	         jQuery(this).animate({"marginLeft": "+=387px"}, "slow");
                 jQuery('#kujemidiv').animate({"marginLeft": "+=390px"}, "slow");
            },
	    function() {
                 jQuery('#kujemidiv').animate({"marginLeft": "-=390px"}, "slow");
		 jQuery(this).animate({"marginLeft": "-=387px"}, "slow").animate({"marginLeft": "+=5px"}, "fast");
		 jQuery('#overlay').css({display: 'none'});
            });
     });
};
})(jQuery);